/* =============================================================================
   Fine Thread — Public Site Design Token Foundation
   Namespace: --ft-pub-*

   5-layer model
   ─────────────
   L2  Primitive ramp   --ft-pub-p-*        Raw hex / rgba values. The ONLY place
                                            in the public token file where literals
                                            live.
   L3  Semantic alias   --ft-pub-color-*    Name describes role, never appearance.
                        --ft-pub-shadow-*
                        --ft-pub-font-*
                        --ft-pub-line-*
                        --ft-pub-space-*
   L4  Granular         --ft-pub-color-btn-*  Context + state: interaction states.
       semantic
   L5  Component hooks  (none required yet)

   Scope: :root — light-only, no dark mode.
   The portal token file (tokens.css) must NOT be loaded by any public page.
   This file must NOT be loaded by any portal template.
   ============================================================================= */

:root {

    /* -------------------------------------------------------------------------
       System
       -------------------------------------------------------------------------*/
    color-scheme: light only;


    /* -------------------------------------------------------------------------
       L2 — Primitive ramp
       Actual hex / rgba values live here and nowhere else.
       -------------------------------------------------------------------------*/

    /* Navy / brand ramp */
    --ft-pub-p-navy:        #2C3E50;
    --ft-pub-p-navy-mid:    #34495E;

    /* Slate / secondary text */
    --ft-pub-p-slate:       #5D6D7E;

    /* Grey ramp — named by approximate hex value */
    --ft-pub-p-grey-600:    #6C757D;
    --ft-pub-p-grey-500:    #888888;
    --ft-pub-p-grey-9c:     #9CA3AF;
    --ft-pub-p-grey-b8:     #B8B8B8;
    --ft-pub-p-grey-cf:     #CFCFCF;
    --ft-pub-p-grey-200:    #F0F0F0;
    --ft-pub-p-grey-100:    #F5F5F5;
    --ft-pub-p-grey-f8:     #F8F9FA;

    /* Warm-grey / near-white text on dark surfaces */
    --ft-pub-p-grey-e5:     #E5E7EB;

    /* Border */
    --ft-pub-p-border:      #DEE2E6;

    /* Dark surfaces */
    --ft-pub-p-charcoal:    #404040;
    --ft-pub-p-ink-dark:    #1A1A1A;

    /* Absolute ends */
    --ft-pub-p-white:       #FFFFFF;
    --ft-pub-p-black:       #000000;

    /* Interaction */
    --ft-pub-p-hover:       #3A3A3A;

    /* Link on dark (footer credit) */
    --ft-pub-p-blue:        #3B82F6;

    /* Alpha ramp — white tints on dark backgrounds */
    --ft-pub-p-white-90:    rgba(255, 255, 255, 0.9);
    --ft-pub-p-white-10:    rgba(255, 255, 255, 0.1);

    /* Alpha ramp — black */
    --ft-pub-p-black-30:    rgb(0 0 0 / 0.3);


    /* -------------------------------------------------------------------------
       L3 — Semantic aliases
       Name describes the role, not the colour.
       -------------------------------------------------------------------------*/

    /* --- Colour --- */

    /* Brand */
    --ft-pub-color-brand:               var(--ft-pub-p-navy);

    /* Surfaces */
    --ft-pub-color-bg-white:            var(--ft-pub-p-white);
    --ft-pub-color-bg-light:            var(--ft-pub-p-grey-100);
    --ft-pub-color-bg-black:            var(--ft-pub-p-black);
    --ft-pub-color-bg-dark:             var(--ft-pub-p-ink-dark);
    --ft-pub-color-bg-charcoal:         var(--ft-pub-p-charcoal);

    /* Text — on-light surfaces */
    --ft-pub-color-text-dark:           var(--ft-pub-p-navy);
    --ft-pub-color-text-subtle:         var(--ft-pub-p-slate);
    --ft-pub-color-text-muted:          var(--ft-pub-p-grey-600);
    --ft-pub-color-text-charcoal:       var(--ft-pub-p-charcoal);

    /* Text — on-dark surfaces */
    --ft-pub-color-text-white:          var(--ft-pub-p-white);
    --ft-pub-color-text-black:          var(--ft-pub-p-black);
    --ft-pub-color-text-pale:           var(--ft-pub-p-grey-e5);
    --ft-pub-color-text-breadcrumb:     var(--ft-pub-p-grey-b8);
    --ft-pub-color-text-eyebrow-dark:   var(--ft-pub-p-grey-cf);

    /* Accent */
    --ft-pub-color-accent:              var(--ft-pub-p-grey-500);

    /* Decorative gradient used on thread elements */
    --ft-pub-color-accent-thread:       linear-gradient(
                                            45deg,
                                            var(--ft-pub-p-navy),
                                            var(--ft-pub-p-navy-mid),
                                            var(--ft-pub-p-grey-500)
                                        );

    /* Lines */
    --ft-pub-color-border:              var(--ft-pub-p-border);

    /* Navigation / chrome */
    --ft-pub-color-nav-border:          var(--ft-pub-p-white-10);
    --ft-pub-color-btn-glass:           var(--ft-pub-p-white-90);

    /* Footer */
    --ft-pub-color-footer-heading:      var(--ft-pub-p-grey-f8);
    --ft-pub-color-footer-link:         var(--ft-pub-p-border);
    --ft-pub-color-footer-bottom:       var(--ft-pub-p-grey-9c);
    --ft-pub-color-footer-credit:       var(--ft-pub-p-blue);

    /* Shadows — navy-tinted, following original shadow values */
    --ft-pub-shadow-sm:                 0 1px 2px 0 rgb(44 62 80 / 0.05);
    --ft-pub-shadow-md:                 0 4px 6px -1px rgb(44 62 80 / 0.1);
    --ft-pub-shadow-lg:                 0 10px 15px -3px rgb(44 62 80 / 0.1);
    --ft-pub-shadow-xl:                 0 20px 25px -5px rgb(44 62 80 / 0.1);
    --ft-pub-shadow-mobile-nav:         0 -4px 6px -1px var(--ft-pub-p-black-30);

    /* --- Typography defaults --- */

    --ft-pub-font-body:                 'Open Sans', sans-serif;
    --ft-pub-font-heading:              'Playfair Display', serif;
    --ft-pub-font-accent:               'Lora', serif;
    --ft-pub-line-body:                 1.6;
    --ft-pub-line-heading:              1.2;

    /* --- Spacing — 4-pt core scale --- */

    --ft-pub-space-1:   4px;
    --ft-pub-space-2:   8px;
    --ft-pub-space-3:   12px;
    --ft-pub-space-4:   16px;
    --ft-pub-space-5:   20px;
    --ft-pub-space-6:   24px;
    --ft-pub-space-7:   32px;
    --ft-pub-space-8:   48px;
    --ft-pub-space-9:   64px;
    --ft-pub-space-10:  80px;


    /* -------------------------------------------------------------------------
       L4 — Granular semantic / context + state
       -------------------------------------------------------------------------*/

    /* Button hover state */
    --ft-pub-color-btn-hover-bg:        var(--ft-pub-p-hover);

}