/* ==========================================================================
   Sci-Bono Clubhouse — Auth & Landing design tokens
   --------------------------------------------------------------------------
   Every colour pairing declared here has been verified against WCAG 2.1
   using tools/check-contrast.py. Do not change a value without re-running it.

   Load order matters. This file MUST come after the reset and before any
   component CSS:

     1. cssRest.css      (reset)
     2. tokens.css       (this file)
     3. auth.css         (components)

   Ratios in the comments are measured, not estimated.
   ========================================================================== */

:root {
  /* ---- Brand surfaces ------------------------------------------------- */
  --navy-900:   #16173A;   /* page background                              */
  --navy-800:   #1E1F4B;   /* card surface — replaces the translucent glass */
  --navy-700:   #2A2C5E;   /* input fill                                   */
  --navy-600:   #393A7B;   /* brand navy (existing), header bar            */
  --blue-600:   #1E6CB4;   /* brand blue (existing), illustration panels   */
  --violet-500: #6C63FF;   /* brand violet (existing) — decorative ONLY.
                              4.32:1 with white: never put body text on it. */

  /* ---- Brand amber ----------------------------------------------------
     The existing #F29A2E is kept. What changes is the text colour on it.
       WAS:  #FFFFFF on #F29A2E =  2.23:1  FAIL (needed 4.5:1)
       NOW:  #1A1523 on #F29A2E =  8.03:1  PASS AAA
     Do not "fix" this by darkening the amber — that loses the brand and
     only reaches 5.05:1. Dark text on bright amber is both more accessible
     and more legible.                                                     */
  --amber-500:  #F29A2E;   /* primary CTA fill                             */
  --amber-600:  #D9821A;   /* primary CTA hover                            */
  --amber-400:  #FFB454;   /* accent text, links, focus ring               */
  --on-amber:   #1A1523;   /* 8.03:1 on --amber-500                  AAA   */

  /* ---- Text on navy ---------------------------------------------------- */
  --text-strong: #FFFFFF;  /* 15.52:1 on --navy-800                  AAA   */
  --text-muted:  #A9ACD9;  /*  7.09:1 on --navy-800                  AAA   */
  --text-link:   #FFB454;  /*  8.80:1 on --navy-800                  AAA   */

  /* ---- Feedback --------------------------------------------------------
     NOTE: these are the on-dark variants. The repo's architecture/
     variables.css defines --color-error etc. for light surfaces; those
     fail on navy. Use these on any dark auth surface.                     */
  --error:       #FF8A80;  /*  6.80:1 on --navy-800                  AA    */
  --success:     #6EE7B7;  /* 10.18:1 on --navy-800                  AAA   */
  --warning:     #FFC773;  /* warm, on-dark                                */

  /* ---- Lines & focus ---------------------------------------------------
     WCAG 1.4.11 requires 3:1 for the boundary of an input against its
     surroundings. The old rgba(255,255,255,.3) border scored 1.67:1.      */
  --border:       #8A8DC7; /*  4.14:1 on --navy-700 (needs 3:1)      PASS  */
  --border-hover: #FFB454;
  --focus-ring:   #FFB454; /*  8.80:1 on --navy-800 (needs 3:1)      PASS  */

  /* ---- Typography ------------------------------------------------------
     ONE family, with a full fallback stack. The previous CSS declared
     font-family: 'Source Code Pro'  with no fallback in four places while
     never loading the font — which is why headings rendered in Times and
     labels in generic monospace on the same screen.

     Load Inter in <head> BEFORE this file:
       <link rel="preconnect" href="https://fonts.googleapis.com">
       <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
       <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap">
     ---------------------------------------------------------------------- */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas,
               'Courier New', monospace;

  /* Fluid modular scale — no media queries needed for type */
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.89rem);  /* small, hints   */
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.06rem);  /* body, controls */
  --step-1:  clamp(1.20rem, 1.13rem + 0.35vw, 1.35rem);  /* lede           */
  --step-2:  clamp(1.44rem, 1.33rem + 0.55vw, 1.70rem);  /* h3             */
  --step-3:  clamp(1.73rem, 1.50rem + 0.90vw, 2.20rem);  /* h2 / card title*/
  --step-4:  clamp(2.07rem, 1.70rem + 1.50vw, 3.00rem);  /* landing h1     */

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;

  /* ---- Spacing — 4px base. Do not invent values between these. -------- */
  --space-1:  0.25rem;  --space-2:  0.5rem;   --space-3:  0.75rem;
  --space-4:  1rem;     --space-5:  1.25rem;  --space-6:  1.5rem;
  --space-8:  2rem;     --space-10: 2.5rem;   --space-12: 3rem;
  --space-16: 4rem;

  /* ---- Shape ----------------------------------------------------------- */
  --radius:    10px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* ---- Targets ---------------------------------------------------------
     WCAG 2.5.5 / iOS HIG minimum is 44px. 48 gives comfortable margin.
     The old values were 36px (login) and 38px (signup).                   */
  --touch: 48px;

  --shadow:    0 10px 30px rgba(0, 0, 0, 0.28);
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.18);

  --transition: 180ms ease;
}