/* =============================================================================
   Critical Copper Mining Corp. — Kit A · SECTION
   tokens.css — the single source of truth for the website.
   Every colour, type size, space, radius, duration and breakpoint used anywhere
   on the site is defined here. Components never carry raw values.
   ============================================================================= */

:root {
  /* ---------------------------------------------------------------- palette */
  --cmc-basalt:        #0E1012;   /* primary ground, dark mode */
  --cmc-graphite:      #181B1F;   /* raised surfaces, cards */
  --cmc-gabbro:        #262B31;   /* borders, dividers, inactive */
  --cmc-ash:           #8E969F;   /* secondary text on dark */
  --cmc-chalk:         #C9CED3;   /* body text on dark */
  --cmc-ice:           #F2F4F5;   /* headlines on dark; light-mode ground */
  --cmc-white:         #FFFFFF;
  --cmc-copper:        #C47A45;   /* the single accent */
  --cmc-copper-bright: #E39A66;   /* accent for small text and links on dark */
  --cmc-copper-deep:   #8F4E27;   /* accent for text on light grounds, print */
  --cmc-ochre:         #CFAF5C;   /* charts: Au series only */
  --cmc-steel:         #6C8BA6;   /* charts: Zn / secondary series only */

  /* -------------------------------------------- semantic colour — dark mode */
  --color-bg:            var(--cmc-basalt);
  --color-bg-elev:       var(--cmc-graphite);
  --color-surface:       var(--cmc-graphite);
  --color-surface-2:     var(--cmc-gabbro);
  --color-border:        var(--cmc-gabbro);
  --color-border-strong: #3A4149;
  --color-text:          var(--cmc-chalk);
  --color-text-strong:   var(--cmc-ice);
  --color-text-muted:    var(--cmc-ash);
  --color-text-inverse:  var(--cmc-basalt);
  --color-accent:        var(--cmc-copper);
  --color-accent-hover:  var(--cmc-copper-bright);
  --color-accent-text:   var(--cmc-copper-bright);  /* links and small copper text: meets AA on Basalt */
  --color-on-accent:     var(--cmc-basalt);
  --color-focus:         var(--cmc-copper-bright);
  --color-selection:     rgba(196, 122, 69, .35);
  --color-scrim:         rgba(14, 16, 18, .72);
  --color-hairline:      rgba(201, 206, 211, .06); /* the section grid */

  /* UI state colours. Not brand colours: they exist for form validation and
     status only, and never appear in headlines, buttons or decoration. */
  --color-success:       #7CA98A;
  --color-warning:       #D1A54A;
  --color-error:         #E0574E;
  --color-info:          var(--cmc-steel);

  /* ---------------------------------------------------- data-visualisation */
  --viz-1: var(--cmc-copper);        /* Cu */
  --viz-2: var(--cmc-ochre);         /* Au */
  --viz-3: var(--cmc-steel);         /* Zn / base metals */
  --viz-4: var(--cmc-ash);           /* Ag / neutral */
  --viz-5: var(--cmc-copper-bright);
  --viz-6: #4B5A6B;
  --viz-grid: var(--cmc-gabbro);
  --viz-axis: var(--cmc-ash);

  /* ------------------------------------------------------------ typography */
  --font-head: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

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

  /* Fluid type scale: clamp(min, preferred, max). Min applies at 360 px, max at 1440 px. */
  --fs-display: clamp(44px, 3.2vw + 30px, 76px);
  --fs-h1:      clamp(38px, 2.6vw + 26px, 64px);
  --fs-h2:      clamp(30px, 1.5vw + 22px, 44px);
  --fs-h3:      clamp(24px, .8vw + 20px, 32px);
  --fs-h4:      clamp(20px, .4vw + 18px, 24px);
  --fs-h5:      18px;
  --fs-h6:      13px;         /* mono label, uppercase, tracked */
  --fs-lead:    clamp(18px, .4vw + 16px, 21px);
  --fs-body:    17px;
  --fs-small:   14px;
  --fs-caption: 12px;
  --fs-data:    14px;
  --fs-ticker:  12px;
  --fs-stat:    clamp(36px, 1.6vw + 28px, 56px);

  --lh-display: 1.02;
  --lh-h1: 1.04;  --lh-h2: 1.08;  --lh-h3: 1.14;  --lh-h4: 1.2;  --lh-h5: 1.3;  --lh-h6: 1.3;
  --lh-lead: 1.5; --lh-body: 1.6; --lh-small: 1.5; --lh-caption: 1.45; --lh-data: 1.4;

  --ls-display: -0.025em; --ls-h1: -0.022em; --ls-h2: -0.018em; --ls-h3: -0.012em; --ls-h4: -0.008em;
  --ls-h5: 0; --ls-label: 0.10em; --ls-ticker: 0.06em; --ls-mono: 0.02em;

  --measure: 62ch;           /* body copy never exceeds this */
  --measure-wide: 72ch;      /* lead paragraphs and intro copy */

  /* --------------------------------------------------------------- spacing */
  --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;
  --section-y: clamp(64px, 8vw, 112px);         /* vertical padding of a page section */
  --section-y-tight: clamp(40px, 5vw, 64px);
  --gutter: 24px;
  --margin: clamp(20px, 5vw, 80px);              /* page side margin */
  --container: 1360px;                           /* max content width */
  --container-narrow: 880px;                     /* long-form reading */
  --grid-rhythm: 96px;                           /* the hairline grid module */

  /* --------------------------------------------------------- shape & lines */
  --radius-0: 0px;  --radius-1: 2px;  --radius-2: 4px;
  --rule: 1px;
  --rule-strong: 2px;

  /* --------------------------------------------------------------- z-index */
  --z-ticker: 40; --z-nav: 50; --z-drawer: 60; --z-modal: 70; --z-toast: 80;

  /* ---------------------------------------------------------------- motion */
  --dur-1: 120ms;   /* hover, focus */
  --dur-2: 200ms;   /* toggles, accordions */
  --dur-3: 320ms;   /* section reveals, drawers */
  --dur-4: 600ms;   /* count-ups, hairline draws */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);       /* arrive and stop; never overshoot */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ----------------------------------------------------------- breakpoints (reference only; CSS cannot read these in media queries) */
  --bp-sm: 480px; --bp-md: 720px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1440px;

  color-scheme: dark;
}

/* --------------------------------------------- semantic colour — light mode */
[data-theme="light"] {
  --color-bg:            var(--cmc-ice);
  --color-bg-elev:       var(--cmc-white);
  --color-surface:       var(--cmc-white);
  --color-surface-2:     #E6E9EC;
  --color-border:        #D5DADF;
  --color-border-strong: #B9C0C7;
  --color-text:          var(--cmc-gabbro);
  --color-text-strong:   var(--cmc-basalt);
  --color-text-muted:    #5C646D;
  --color-text-inverse:  var(--cmc-ice);
  --color-accent:        var(--cmc-copper);
  --color-accent-hover:  var(--cmc-copper-deep);
  --color-accent-text:   var(--cmc-copper-deep);   /* copper text on light must be Copper Deep */
  --color-on-accent:     var(--cmc-basalt);   /* Basalt on Copper: 6.9:1 in both modes; white on copper fails AA */
  --color-focus:         var(--cmc-copper-deep);
  --color-selection:     rgba(196, 122, 69, .28);
  --color-scrim:         rgba(242, 244, 245, .82);
  --color-hairline:      rgba(14, 16, 18, .06);
  --color-error:         #B7322A;
  --color-success:       #3E7A52;
  --color-warning:       #8A6A1C;
  --viz-grid: #D5DADF; --viz-axis: #5C646D;
  color-scheme: light;
}