/* ==========================================================
   FRAUDCRAFT DESIGN TOKENS
   Version 3.0 · Canopy palette · Status: APPROVED and LOCKED.

   The single source of truth for colour, type, shape, and motion.
   Every page loads this file first. No page defines its own colours.

   Two visual worlds. World 1 tokens are prefixed --fc-. World 2 tokens
   are prefixed --sg-. Spacing is shared.

   A World 1 page must never reference an --sg- token.
   A World 2 page must never reference an --fc- token.
   The deploy check enforces this.
   ========================================================== */

:root {

  /* ==========================================================
     SHARED SPACING
     World 1 uses steps 4 through 10. World 2 uses steps 1 through 6.
     ========================================================== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  --content-max: 1180px;
  --prose-max:   68ch;


  /* ==========================================================
     WORLD 1 · FRAUDCRAFT
     ========================================================== */

  /* --- Brand ---
     CANOPY. Green is a surface here, not a garnish. --fc-canopy is a
     page level fill that carries cream type, which is what stops the
     product reading as a neutral document with green buttons on it. */
  --fc-green:      #12703F;   /* PRIMARY. buttons, links, brand, progress */
  --fc-green-deep: #0A3D28;   /* hover, and the deep green surface */
  --fc-canopy:     #0A3D28;   /* full bleed green sections. same value, named for its job */
  --fc-green-wash: #D9EADC;   /* selected states, tints, progress track fill */
  --fc-cream:      #FBF7EC;   /* page canvas */
  --fc-surface:    #FFFFFF;   /* cards, inputs, panels, modals */
  --fc-ink:        #14120C;   /* primary type. warm near black */

  /* --- Accent. Meaning is fixed and never reassigned. --- */
  --fc-citrus:     #FF7A1A;   /* THE LOUD ONE. energy, markers, pop bands, CTA emphasis */
  --fc-coral:      #FF7A1A;   /* alias. the constitution's coral/orange slot is citrus */
  --fc-violet:     #5B3FD9;   /* career, identity, matching, score, profile */
  --fc-yellow:     #FFC93C;   /* attention, highlight, badge, certification */
  --fc-blue:       #8FC0EE;   /* informational, calm, employer surfaces */
  --fc-sky:        #CFE3FF;   /* pastel counterweight. large soft fills only */

  /* --- Semantic. Separate from accent so meaning never depends
         on a brand decision. --- */
  --fc-success:    #1E8A55;
  --fc-warning:    #9A6200;   /* type and border. yellow at 20% is the fill */
  --fc-error:      #C43D21;
  --fc-info:       #2E6FB8;

  /* --- Neutral gray. Warm tinted to sit on cream. --- */
  --fc-gray-100: #F1EDE2;
  --fc-gray-200: #E2DAC6;
  --fc-gray-300: #CDC5B1;
  --fc-gray-400: #A69E8D;
  --fc-gray-500: #736C5B;
  --fc-gray-600: #57513F;
  --fc-gray-700: #3B372C;
  --fc-gray-800: #242015;
  --fc-gray-900: #14120C;

  /* --- Aliases used in components --- */
  --fc-line:      var(--fc-gray-200);
  --fc-ink-soft:  var(--fc-gray-600);
  --fc-correct:   var(--fc-success);
  --fc-incorrect: var(--fc-error);
  /* Fraud signal, risk and alert now read as --fc-error, not citrus.
     Citrus was reassigned to energy, and one hue cannot mean both
     "look here, this is exciting" and "this is a fraud signal".
     This also lines World 1 up with FC Signal, where risk is already red. */
  --fc-risk:      var(--fc-error);

  /* --- Type --- */
  --fc-font-display: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  --fc-font-body:    'Figtree', system-ui, -apple-system, sans-serif;

  --fc-size-hero:       72px;
  --fc-size-h1:         52px;
  --fc-size-h2:         38px;
  --fc-size-h3:         26px;
  --fc-size-body-large: 20px;
  --fc-size-body:       17px;
  --fc-size-small:      15px;
  --fc-size-label:      12px;
  --fc-size-button:     17px;

  --fc-lh-hero:       0.94;
  --fc-lh-h1:         1.00;
  --fc-lh-h2:         1.08;
  --fc-lh-h3:         1.20;
  --fc-lh-body-large: 1.45;
  --fc-lh-body:       1.60;
  --fc-lh-small:      1.55;
  --fc-lh-label:      1.20;

  --fc-track-hero:  -0.03em;
  --fc-track-h1:    -0.025em;
  --fc-track-h2:    -0.02em;
  --fc-track-h3:    -0.01em;
  --fc-track-label:  0.10em;

  /* --- Radius --- */
  --fc-radius-btn:     18px;
  --fc-radius-input:   12px;
  --fc-radius-sm-card: 18px;
  --fc-radius-lg-card: 28px;
  --fc-radius-modal:   32px;
  --fc-radius-pill:    999px;

  /* --- Elevation. The 0 2px 0 lip is what makes cards physical. --- */
  --fc-shadow-card:  0 2px 0 0 #E2DAC6, 0 12px 28px -18px rgba(20,18,12,0.35);
  --fc-shadow-lift:  0 4px 0 0 #E2DAC6, 0 22px 44px -22px rgba(20,18,12,0.42);
  --fc-shadow-modal: 0 32px 64px -24px rgba(20,18,12,0.45);

  /* --- Motion --- */
  --fc-ease:       cubic-bezier(0.2, 0.8, 0.2, 1);
  --fc-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --fc-dur-quick:  140ms;
  --fc-dur-base:   220ms;
  --fc-dur-slow:   420ms;   /* progress fills, Assist Bar drain */
  --fc-dur-reveal: 900ms;   /* Score Reveal only */

  /* --- Controls --- */
  --fc-control-h:    52px;
  --fc-control-h-sm: 44px;
  --fc-option-h:     64px;  /* assessment answer row minimum */


  /* ==========================================================
     WORLD 2 · FC SIGNAL
     Simulated investigation environment, Northstar Community Bank
     ========================================================== */

  /* --- Colour. Deliberately desaturated. No navy, no gradient,
         no glass, no dark mode. --- */
  --sg-app:          #EDEFEC;
  --sg-surface:      #FFFFFF;
  --sg-surface-alt:  #F7F8F6;
  --sg-ink:          #101311;
  --sg-ink-soft:     #606862;
  --sg-line:         #D3D8D2;
  --sg-line-strong:  #A8B0A7;
  --sg-accent:       #1F5E46;
  --sg-accent-wash:  #E2EBE6;

  --sg-risk-high:    #B3311C;
  --sg-risk-med:     #9A6212;
  --sg-risk-low:     #3D6B49;
  --sg-flag:         #2E4C8C;   /* analyst marks, selected evidence */

  --sg-warn:         #F2D479;   /* the simulation banner, and nothing else */

  /* --- Type --- */
  --sg-font-ui:   'Archivo', system-ui, -apple-system, sans-serif;
  --sg-font-data: 'Spline Sans Mono', ui-monospace, SFMono-Regular, monospace;

  --sg-size-view:  20px;
  --sg-size-panel: 14px;
  --sg-size-body:  13px;
  --sg-size-micro: 11px;

  --sg-lh-view:   1.25;
  --sg-lh-panel:  1.30;
  --sg-lh-body:   1.50;
  --sg-lh-table:  1.40;
  --sg-lh-micro:  1.20;

  --sg-track-micro: 0.06em;
  --sg-track-brand: 0.08em;

  /* --- Density and shape --- */
  --sg-radius:      4px;
  --sg-radius-sm:   2px;
  --sg-row-height:  34px;
  --sg-head-height: 30px;
  --sg-tab-height:  36px;
  --sg-bar-height:  44px;
  --sg-panel-pad:   16px;
  --sg-gap:         8px;
  --sg-rail-w:      200px;
  --sg-panel-w:     320px;
  --sg-banner-h:    28px;

  /* --- Motion. Near zero by design. --- */
  --sg-dur: 100ms;
}


/* ==========================================================
   QUALITY FLOOR. Both worlds. Not announced in the interface.
   ========================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* The browser paints its own canvas in the gap between one page
   unloading and the next stylesheet parsing. On a dark mode OS that
   canvas is black, which shows as a flash on every navigation.
   Declaring the scheme and painting html, not just body, closes it. */
:root { color-scheme: light; }
html { background-color: var(--fc-cream); }

/* FC Signal is a different surface and must not inherit cream. */
html.sg { background-color: var(--sg-app); }

:focus-visible {
  outline: 3px solid var(--fc-green);
  outline-offset: 2px;
}

/* World 2 focus uses its own accent. Scoped by the shell class so a
   World 1 page never picks this up. */
.sg-app :focus-visible {
  outline: 2px solid var(--sg-accent);
  outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================
   MOBILE TYPE SCALE, WORLD 1
   Body never drops below 16px anywhere in the product.
   ========================================================== */

@media (max-width: 720px) {
  :root {
    --fc-size-hero:       44px;
    --fc-size-h1:         34px;
    --fc-size-h2:         28px;
    --fc-size-h3:         22px;
    --fc-size-body-large: 18px;
    --fc-size-body:       16px;
    --fc-control-h:       48px;
  }
}