/* ============================================================
   ScirDom Design Tokens
   Source: ScirDom_Figma_Design_Brief_v1.md, Sections 1.1-1.5
   All values are exact transcriptions from the brief.
   v2: Added transition, overlay, and z-index tokens.
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     1.1 COLOUR PALETTE (24 colours)
     ---------------------------------------------------------- */

  /* Core Brand Colours (4) */
  --color-deep-ink-navy:    #0F172A; /* slate-900 — Primary */
  --color-mineral-teal:     #0F766E; /* teal-700  — Accent  */
  --color-cool-slate:       #475569; /* slate-600 — Neutral */
  --color-off-white:        #F8FAFC; /* slate-50  — Background */

  /* Navy Scale (4) */
  --color-ink-black:        #020617; /* slate-950 */
  --color-dark-navy:        #1E293B; /* slate-800 */
  --color-medium-navy:      #334155; /* slate-700 */
  --color-faded-navy:       #64748B; /* slate-500 */

  /* Teal Scale (4) */
  --color-deep-teal:        #134E4A; /* teal-900 */
  --color-dark-teal:        #115E59; /* teal-800 */
  --color-light-teal:       #0D9488; /* teal-600 */
  --color-pale-teal:        #14B8A6; /* teal-500 */

  /* Neutral Scale (4) */
  --color-silver-slate:     #94A3B8; /* slate-400 */
  --color-light-slate:      #CBD5E1; /* slate-300 */
  --color-pale-slate:       #E2E8F0; /* slate-200 */
  --color-near-white:       #F1F5F9; /* slate-100 */

  /* Functional Colours (8) */
  --color-white:            #FFFFFF;
  --color-black:            #000000;
  --color-verified-green:   #16A34A; /* green-600 */
  --color-verified-green-lt:#F0FDF4; /* green-50  */
  --color-error-red:        #DC2626; /* red-600   */
  --color-error-red-lt:     #FEF2F2; /* red-50    */
  --color-warning-amber:    #D97706; /* amber-600 */
  --color-warning-amber-lt: #FFFBEB; /* amber-50  */

  /* Overlay Colours (for dark backgrounds) */
  --overlay-white-10:       rgba(255, 255, 255, 0.1);
  --overlay-white-30:       rgba(255, 255, 255, 0.3);
  --overlay-teal-05:        rgba(15, 118, 110, 0.05);
  --overlay-teal-10:        rgba(15, 118, 110, 0.1);


  /* ----------------------------------------------------------
     1.2 TYPOGRAPHY
     Font stacks loaded via Google Fonts in each HTML file.
     ---------------------------------------------------------- */

  --font-heading:   'DM Serif Display', serif;
  --font-body:      'Inter', sans-serif;
  --font-mono:      'JetBrains Mono', monospace;

  /* H1 — Page title */
  --h1-size:        48px;
  --h1-weight:      400;
  --h1-lh:          1.1;
  --h1-ls:          -0.02em;
  --h1-color:       var(--color-deep-ink-navy);

  /* H2 — Section heading */
  --h2-size:        36px;
  --h2-weight:      400;
  --h2-lh:          1.2;
  --h2-ls:          -0.01em;
  --h2-color:       var(--color-deep-ink-navy);

  /* H3 — Subsection */
  --h3-size:        28px;
  --h3-weight:      400;
  --h3-lh:          1.3;
  --h3-ls:          0;
  --h3-color:       var(--color-deep-ink-navy);

  /* H4 — Card heading */
  --h4-size:        22px;
  --h4-weight:      400;
  --h4-lh:          1.3;
  --h4-ls:          0;
  --h4-color:       var(--color-deep-ink-navy);

  /* Body large */
  --body-lg-size:   18px;
  --body-lg-weight: 400;
  --body-lg-lh:     1.6;
  --body-lg-color:  var(--color-cool-slate);

  /* Body default */
  --body-size:      16px;
  --body-weight:    400;
  --body-lh:        1.6;
  --body-color:     var(--color-cool-slate);

  /* Body small */
  --body-sm-size:   14px;
  --body-sm-weight: 400;
  --body-sm-lh:     1.5;
  --body-sm-color:  var(--color-cool-slate);

  /* Caption */
  --caption-size:   12px;
  --caption-weight: 500;
  --caption-lh:     1.4;
  --caption-ls:     0.02em;
  --caption-color:  var(--color-faded-navy);

  /* Label */
  --label-size:     14px;
  --label-weight:   600;
  --label-lh:       1.4;
  --label-ls:       0.02em;
  --label-color:    var(--color-deep-ink-navy);

  /* Button text */
  --btn-size:       16px;
  --btn-weight:     600;
  --btn-lh:         1;
  --btn-ls:         0.01em;

  /* Code / Hash */
  --code-size:      14px;
  --code-weight:    400;
  --code-lh:        1.5;
  --code-color:     var(--color-cool-slate);

  /* Code / Hash (small) */
  --code-sm-size:   12px;
  --code-sm-weight: 400;
  --code-sm-lh:     1.5;
  --code-sm-color:  var(--color-faded-navy);


  /* ----------------------------------------------------------
     1.3 SPACING SYSTEM (4px grid)
     ---------------------------------------------------------- */

  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-2xl:  48px;
  --space-3xl:  64px;
  --space-4xl:  96px;

  /* Content width */
  --content-max-width: 1280px;
  --content-padding:   24px;

  /* Grid */
  --grid-columns: 12;
  --grid-gutter:  24px;


  /* ----------------------------------------------------------
     1.4 BORDER AND SHADOW
     ---------------------------------------------------------- */

  --radius-card:    8px;
  --radius-button:  6px;
  --radius-input:   6px;

  --shadow-sm:      0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:      0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);

  --border-default: 1px solid var(--color-pale-slate);
  --border-focus:   2px solid var(--color-mineral-teal);
  --border-divider: 1px solid var(--color-pale-slate);


  /* ----------------------------------------------------------
     1.5 ICONOGRAPHY
     Lucide icons, 24px default, 1.5px stroke.
     ---------------------------------------------------------- */

  --icon-size:      24px;
  --icon-stroke:    1.5;


  /* ----------------------------------------------------------
     1.6 TRANSITIONS (v2)
     Centralised timing values. Use throughout components.
     ---------------------------------------------------------- */

  --transition-fast:     0.15s ease;
  --transition-normal:   0.2s ease;
  --transition-slow:     0.3s ease;


  /* ----------------------------------------------------------
     1.7 Z-INDEX SCALE (v2)
     ---------------------------------------------------------- */

  --z-nav:        100;
  --z-overlay:    200;
  --z-modal:      300;
}