/* ============================================================
   reach-tokens.css — the single source of truth for BSU REACH
   ============================================================

   WHAT THIS FILE IS
   A list of named values. Nothing in here draws anything: there
   is not one selector, not one rule that targets an element. It
   only says "the page background is called --page and it is this
   colour", and then every other stylesheet asks for --page
   instead of writing the colour out again.

   WHY
   Right now a colour like #dc2626 is written out by hand 77
   times across the two stylesheets and the PHP views. Changing
   it means finding all 77. Worse, nobody can tell which of the
   greys is "the" grey: #f1f5f9, #f8fafc, #cbd5e1, #334155 and
   #e2e8f0 are all in use, and none of them is one of the two
   greys the project brief actually specifies.

   With this file there is one place to change, and the name says
   what the value is for, so the next person does not have to
   guess whether #e2e8f0 was a border or a background.

   THREE LAYERS, ON PURPOSE
     1. PRIMITIVES  raw scales, named for what they ARE
                    (--green-600, --n-100). Never used directly
                    by a component.
     2. SEMANTIC    named for what they are FOR (--page, --border,
                    --danger). This is what components use.
     3. LEGACY      the old names, kept alive so the existing
                    stylesheets keep working unchanged.

   The point of layer 2 is that the header stops being "green" and
   starts being "--surface". Then changing the header from green
   to egg white is one line here, not a hunt through 2,800 lines.

   THIS FILE EXISTS TWICE
     home/assets/css/reach-tokens.css
     admin/public/assets/css/reach-tokens.css
   The two trees have separate document roots and cannot share a
   file. Keep them byte-identical. (Same situation as csrf.js and
   author-fields.js.)

   CHANGING ANYTHING HERE
   Static assets are cached for a year with `immutable`, so bump
   the ?v= on the <link> in BOTH headers or nobody sees the change.
   ============================================================ */

:root {

  /* ==========================================================
     1. PRIMITIVES — raw scales. Do not use these in components.
     ========================================================== */

  /* --- BSU brand green ----------------------------------------
     --green-600 and --green-900 are the two official university
     greens. The rest are tints and shades derived from them so
     that hover states, active nav and chips have somewhere to go
     without inventing a new colour each time. */
  --green-900: #082103;   /* BSU Dark Green   — official */
  --green-800: #0F3A05;
  --green-700: #17500A;
  --green-600: #20650A;   /* BSU Light Green  — official */
  --green-500: #2E7F14;
  --green-100: #DCE9D5;
  --green-50:  #F1F6EE;

  /* --- BSU gold / yellow --------------------------------------
     Official identity colours. Reserved for accents, badges and
     counts. Deliberately NOT used for large fills: #F0D411 on
     white is about 1.6:1, so text on it is unreadable. */
  --gold-700:   #7A4A02;  /* readable gold text on a light tint */
  --gold-600:   #D88302;  /* BSU Gold Orange  — official */
  --gold-100:   #FEF6DC;
  --yellow-500: #F0D411;  /* BSU Yellow Gold  — official */

  /* --- Neutrals ------------------------------------------------
     --n-25 and --n-50 are the two the project brief specifies
     (#FAFAFA off-white, #F3F4F6 grey). The others fill in the
     ramp so borders and text have consistent steps. */
  --n-0:   #FFFFFF;
  --n-25:  #FAFAFA;       /* brief: page background */
  --n-50:  #F3F4F6;       /* brief: the grey in the mix */
  --n-100: #E5E7EB;
  --n-200: #D1D5DB;
  --n-400: #9CA3AF;
  --n-500: #6B7280;
  /* --n-600 exists because --n-500 fails 4.5:1 against the grey surfaces
     (4.39 on #F3F4F6). Measured, not guessed. This is the muted-text step. */
  --n-600: #5D6470;
  --n-700: #374151;
  --n-900: #111827;

  /* --- Status --------------------------------------------------
     Every one of these is dark enough to pass 4.5:1 on its own
     tint and on white. The Tailwind red currently in the code
     (#dc2626) does not, which is why it is not here. */
  --danger-700: #A5251A;
  --danger-50:  #FDECEA;
  --danger-200: #F5C6C0;

  --warn-700:   #7A4A02;
  --warn-50:    #FEF6DC;

  --ok-700:     #0F766E;
  --ok-50:      #ECFDF5;

  --info-700:   #3730A3;
  --info-50:    #EEF2FF;


  /* ==========================================================
     2. SEMANTIC — what components should actually use.
     ========================================================== */

  /* --- Surfaces ---------------------------------------------- */
  --page:            var(--n-25);
  --surface:         var(--n-0);
  --surface-sunken:  var(--n-50);
  --border:          var(--n-100);
  --border-strong:   var(--n-200);

  /* --- Text --------------------------------------------------- */
  --text:            var(--n-900);
  /* Was #64748b, which measured 4.34:1 on the grey surfaces - just under the
     4.5 minimum, on 8 elements of the profile page alone. --n-600 clears it
     everywhere (5.4:1+). One edit here fixed all of them in both trees. */
  --text-muted:      var(--n-600);
  --text-subtle:     var(--n-400);
  --text-on-brand:   var(--n-0);

  /* --- Brand -------------------------------------------------- */
  --brand:           var(--green-600);
  --brand-strong:    var(--green-900);
  --brand-ink:       var(--green-700);  /* brand-coloured TEXT on a light bg */
  --brand-tint:      var(--green-50);   /* active nav, chips */
  --brand-tint-line: var(--green-100);

  --accent:          var(--gold-600);
  --accent-ink:      var(--gold-700);
  --accent-tint:     var(--gold-100);

  /* --- Links -------------------------------------------------- */
  --link:            var(--green-600);
  --link-hover:      var(--green-900);

  /* --- Status ------------------------------------------------- */
  --danger:          var(--danger-700);
  --danger-surface:  var(--danger-50);
  --danger-line:     var(--danger-200);
  --warning:         var(--warn-700);
  --warning-surface: var(--warn-50);
  --success:         var(--ok-700);
  --success-surface: var(--ok-50);
  --info:            var(--info-700);
  --info-surface:    var(--info-50);

  /* --- Focus --------------------------------------------------
     One visible focus ring everywhere. Keyboard users currently
     get whatever the browser does, which on a green header is
     close to invisible. */
  --focus-ring: 0 0 0 3px rgba(32, 101, 10, 0.35);


  /* ==========================================================
     3. TYPE
     ========================================================== */

  /* Outfit is already loaded and stays for all interface text.
     --font-title is declared now but nothing uses it until the
     content components land; publication titles and abstracts
     will use it so the repository reads as scholarly rather than
     as an app. */
  --font-ui:    'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-title: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono:  ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, monospace;

  --fs-xs:   0.6875rem;  /* 11px — badges, table eyebrows       */
  --fs-sm:   0.75rem;    /* 12px — captions, meta lines         */
  --fs-base: 0.8125rem;  /* 13px — dense UI, table cells        */
  --fs-md:   0.875rem;   /* 14px — body, nav, labels            */
  --fs-lg:   1rem;       /* 16px — lead text                    */
  --fs-xl:   1.1875rem;  /* 19px — result titles                */
  --fs-2xl:  1.375rem;   /* 22px — page titles                  */
  --fs-3xl:  2rem;       /* 32px — record title                 */

  --lh-tight:   1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;    /* abstracts and long prose            */

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;


  /* ==========================================================
     4. SPACE — 4px base. Use the steps, not arbitrary numbers.
     ========================================================== */

  --s-1:  0.25rem;   /*  4px */
  --s-2:  0.5rem;    /*  8px */
  --s-3:  0.75rem;   /* 12px */
  --s-4:  1rem;      /* 16px */
  --s-5:  1.25rem;   /* 20px */
  --s-6:  1.5rem;    /* 24px */
  --s-8:  2rem;      /* 32px */
  --s-10: 2.5rem;    /* 40px */
  --s-12: 3rem;      /* 48px */


  /* ==========================================================
     5. RADIUS, SHADOW, MOTION
     ========================================================== */

  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06);
  --shadow-md: 0 2px 8px rgba(17, 24, 39, 0.08);
  --shadow-lg: 0 8px 24px rgba(17, 24, 39, 0.12);

  /* SNAPPY, not animated. Short enough to read as "instant with a softened
     edge" rather than as motion you wait for.

     The rule that matters: anything changing LAYOUT (width, height, position)
     gets NO transition at all - that is what made the old sidebar feel
     sluggish, sliding its width over 300ms. Only paint properties transition:
     colour, background, border, opacity, shadow, and small transforms. */
  --t-fast: 70ms;    /* hover, focus, active - effectively instant */
  --t-base: 110ms;   /* menus, disclosure                          */
  --ease:   cubic-bezier(0.2, 0, 0, 1);   /* fast out, no overshoot */


  /* ==========================================================
     6. LAYOUT
     ========================================================== */

  --header-h:    56px;    /* was 70; a slimmer bar gives content back */
  --sidebar-w:   240px;
  --rail-w:      72px;    /* collapsed icon rail — target width  */
  --content-max: 1280px;

  /* Breakpoints are listed here for reference only. CSS custom
     properties CANNOT be used inside a @media query — the browser
     resolves media queries before variables exist. Write the px
     value literally and keep it matching this list.

        480px   phone
        768px   large phone / small tablet portrait
        1024px  tablet landscape / small laptop   <-- MISSING in admin
        1280px  laptop
        1440px  desktop

     The admin stylesheet currently declares only 768 and 480, so
     nothing at all changes between 769px and 1440px. */


  /* ==========================================================
     7. Z-INDEX — one ladder, so nothing fights.
     ========================================================== */

  --z-header:  1000;
  --z-sidebar: 1500;
  --z-overlay: 1900;
  --z-modal:   2000;
  --z-toast:   2500;


  /* ==========================================================
     8. LEGACY BRIDGE
     ==========================================================
     The names the existing stylesheets already use, set to the
     values they have TODAY. Both reachhome.css and reachadmin.css
     used to declare these in their own :root; those blocks were
     removed and replaced by this one, so the computed result is
     identical and nothing moves.

     Note these are NOT pointed at the semantic tokens above yet.
     That swap is the next step, and it is the step that changes
     how the site looks. Doing it here would have made this a
     redesign rather than a refactor.
     ---------------------------------------------------------- */

  --bsu-light-green: #20650a;
  --bsu-dark-green:  #082103;
  --bsu-gold:        #d88302;
  --bsu-yellow-gold: #f0d411;

  --primary-color:   var(--bsu-light-green);
  --secondary-color: var(--bsu-dark-green);
  --accent-color:    var(--bsu-yellow-gold);
  --accent-dark:     var(--bsu-gold);

  --bg-color:        #f1f5f9;   /* Tailwind slate-100. Becomes var(--page)  */
  --surface-color:   #ffffff;   /*                     becomes var(--surface) */

  --text-main:       #0f172a;   /* becomes var(--text)        */
  /* --text-muted is declared once, in section 2. */
  --border-color:    #e2e8f0;   /* becomes var(--border)      */

  --border-radius:   8px;       /* becomes var(--r-md)        */

  --danger-color:    #b91c1c;   /* becomes var(--danger)      */
  --danger-bg:       #fef2f2;   /* becomes var(--danger-surface) */
  --danger-border:   #fecaca;   /* becomes var(--danger-line) */


  /* ==========================================================
     9. WHAT FLIPS IN THE NEXT STEP
     ==========================================================
     The chrome change is four lines in section 8 and little else:
     bg-color points at page, surface-color at surface, text-main
     at text, border-color at border.

     Plus, in reachadmin.css / reachhome.css, the header and
     sidebar backgrounds move from primary-color to surface, with
     a 3px brand rule across the top of the page.

     (Written as prose on purpose. CSS comments do not nest, so a
     sample declaration carrying its own trailing comment would
     close this block early and the rest would be parsed as live
     CSS. That is not hypothetical: it happened in the first draft
     of this file and silently activated three of the new values.)
     ========================================================== */
}