/* =========================================================
   JSC TOKENS
   File: jsc-tokens.css
   Layer: Foundation / Visual Tokens
   Version: 2.0

   PURPOSE
   ----------------------------------------------------------------
   Establish a cleaner visual token system for JSC.

   SYSTEM MODEL
   ----------------------------------------------------------------
   1) Foundation palette
      - Raw brand and neutral colors only

   2) Color channels
      - Minimal RGB channel helpers for alpha-based composition

   3) Semantic roles
      - Text
      - Links
      - Surfaces

   4) Effect tokens
      - Dividers
      - Overlays
      - Shadows
      - Focus

   5) Foundation utilities
      - Radius
      - Motion
      - Z-index

   MIGRATION DIRECTION
   ----------------------------------------------------------------
   - Prefer semantic roles in component CSS
   - Keep raw palette tokens as source-of-truth
   - Use RGB channel helpers only where alpha composition is needed
   - Avoid scattering hard-coded rgba() values through component files
========================================================= */

:root{
/* ========================================================
   1) Z-INDEX
======================================================== */

  --jsc-z-overlay: 99998;

  --jsc-z-header: 99999;

  --jsc-z-panel: 100000;


/* ========================================================
   2) FOUNDATION PALETTE — BRAND
======================================================== */

  --jsc-mirage: #13182f;

  --jsc-green-kelp: #3b3c1f;

  --jsc-sandwisp: #e6cb73;

  --jsc-astronaut: #365277;

  --jsc-finch: #76804d;

  --jsc-straw: #e2b573;

  --jsc-cocoa-bean: #4d1618;

  --jsc-nickel: #717276;


/* ========================================================
   3) FOUNDATION PALETTE — NEUTRALS
   Keep neutrals richer and more usable
======================================================== */

  --jsc-white: #fff;

  --jsc-black: #000;

  --jsc-ink: #121212;

  --jsc-ink-deep: #12141a;

  --jsc-ink-soft: #2a2d34;

  --jsc-ink-muted: #5b616c;

  --jsc-paper: #f7f6f3;

  --jsc-paper-soft: #f2f0ea;

  --jsc-paper-deep: #e7e2d7;


/* ========================================================
   4) COLOR CHANNELS
   Only for colors that need alpha composition
   Use modern rgb(var(--token) / alpha) syntax
======================================================== */

  --jsc-rgb-green-kelp: 59 60 31;

  --jsc-rgb-mirage: 19 24 47;

  --jsc-rgb-sandwisp: 230 203 115;

  --jsc-rgb-white: 255 255 255;

  --jsc-rgb-black: 0 0 0;

/* ========================================================
   4b) OPACITY SCALE
======================================================== */
  --jsc-o-04: 04%;

  --jsc-o-05: 05%;

  --jsc-o-06: 06%;

  --jsc-o-08: 08%;

  --jsc-o-10: 10%;

  --jsc-o-12: 12%;

  --jsc-o-15: 15%;

  --jsc-o-18: 18%;

  --jsc-o-32: 32%;

  --jsc-o-25: 25%;

  --jsc-o-28: 28%;

  --jsc-o-35: 35%;

  --jsc-o-42: 42%;

  --jsc-o-45: 45%;

  --jsc-o-50: 50%;

  --jsc-o-55: 55%;

  --jsc-o-58: 58%;

  --jsc-o-62: 62%;

  --jsc-o-70: 70%;

  --jsc-o-78: 78%;

  --jsc-o-85: 85%;

  --jsc-o-88: 88%;

  --jsc-o-90: 90%;

  --jsc-o-92: 92%;

  --jsc-o-94: 94%;

  --jsc-o-95: 95%;
  
  --jsc-o-96: 96%;

  --jsc-o-98: 98%;

  --jsc-o-100: 100%;

/* ========================================================
   5) SEMANTIC TEXT
======================================================== */

  --jsc-text-strong: rgb(var(--jsc-rgb-white) / var(--jsc-o-92));

  --jsc-text-body: rgb(var(--jsc-rgb-white) /  var(--jsc-o-85));

  --jsc-text-soft: rgb(var(--jsc-rgb-white) / var(--jsc-o-70));

  --jsc-text-muted: rgb(var(--jsc-rgb-white) / var(--jsc-o-62));

  --jsc-text-on-light: var(--jsc-mirage);

  --jsc-text-on-light-soft: rgb(var(--jsc-rgb-mirage) / var(--jsc-o-78));

  --jsc-text-on-light-muted: rgb(var(--jsc-rgb-mirage) / var(--jsc-o-58));


/* ========================================================
   6) SEMANTIC LINKS
======================================================== */

  --jsc-link: var(--jsc-ink);

  --jsc-link-hover: var(--jsc-ink-deep);

  --jsc-link-active: var(--jsc-ink);

  --jsc-link-active-hover: var(--jsc-ink-deep);

/* ========================================================
   7) SEMANTIC SURFACES
======================================================== */

  --jsc-surface-site: var(--jsc-green-kelp);

  --jsc-surface-main: var(--jsc-green-kelp);

  --jsc-surface-dark: var(--jsc-mirage);

  --jsc-surface-light: var(--jsc-white);

  --jsc-surface-light-soft: var(--jsc-paper);

  --jsc-surface-light-muted: var(--jsc-paper-soft);

  --jsc-surface-header: rgb(var(--jsc-rgb-white) / var(--jsc-o-92));

  --jsc-surface-panel: rgb(var(--jsc-rgb-green-kelp) / var(--jsc-o-94));

  --jsc-surface-panel-strong: rgb(var(--jsc-rgb-green-kelp) / var(--jsc-o-96));

  --jsc-surface-header-scrolled: rgb(var(--jsc-rgb-green-kelp) / var(--jsc-o-88));

/* ========================================================
   8) SEMANTIC ACCENTS
======================================================== */

  --jsc-accent: var(--jsc-sandwisp);

  --jsc-accent-alt: var(--jsc-straw);

  --jsc-accent-deep: var(--jsc-cocoa-bean);


/* ========================================================
   9) DIVIDERS
======================================================== */

  --jsc-divider: rgb(var(--jsc-rgb-white) / var(--jsc-o-08));

  --jsc-divider-strong: rgb(var(--jsc-rgb-white) / var(--jsc-o-12));

  --jsc-divider-dark: rgb(var(--jsc-rgb-mirage) / var(--jsc-o-12));

  --jsc-divider-accent: rgb(var(--jsc-rgb-sandwisp) / var(--jsc-o-42));


/* ========================================================
   10) OVERLAYS + SCRIMS
======================================================== */

  --jsc-overlay-soft: rgb(var(--jsc-rgb-black) / var(--jsc-o-18));

  --jsc-overlay-base: rgb(var(--jsc-rgb-black) / var(--jsc-o-32));

  --jsc-overlay-strong: rgb(var(--jsc-rgb-black) / var(--jsc-o-45));

  --jsc-scrim-top: linear-gradient(
    to bottom,
    rgb(var(--jsc-rgb-black) / var(--jsc-o-35)),
    rgb(var(--jsc-rgb-black) / var(--jsc-o-15)),
    rgb(var(--jsc-rgb-black) / 0%)
  );


/* ========================================================
   11) SHADOWS
======================================================== */

  --jsc-shadow-soft: rgb(var(--jsc-rgb-black) / var(--jsc-o-35));

  --jsc-shadow-deep: rgb(var(--jsc-rgb-black) / var(--jsc-o-55));

  --jsc-shadow-inset: rgb(var(--jsc-rgb-white) / var(--jsc-o-08));

  --jsc-shadow-accent-soft: rgb(var(--jsc-rgb-sandwisp) / var(--jsc-o-25));


/* ========================================================
   12) FOCUS
======================================================== */

  --jsc-focus-strong: rgb(var(--jsc-rgb-sandwisp) / var(--jsc-o-95));

  --jsc-outline-w: 2px;

  --jsc-outline-offset: 4px;


/* ========================================================
   13) RADIUS
======================================================== */

  --jsc-radius-2xs: 2px;

  --jsc-radius-xs: 6px;

  --jsc-radius-sm: 8px;

  --jsc-radius-md: 14px;

  --jsc-radius-lg: 18px;

  --jsc-radius-pill: 999px;


/* ========================================================
   14) MOTION
======================================================== */

  --jsc-ease: cubic-bezier(.4, 0, .2, 1);

  --jsc-fast: 180ms;

  --jsc-med: 220ms;

  --jsc-slow: 320ms;

}