/* design/tokens.css — the ONLY place a colour, size, radius or duration is defined.
   A raw hex or px value in application CSS is a lint failure. (DESIGN-SYSTEM §10) */

:root {
  /* ---- palette ------------------------------------------------------- */
  --mc-c-paper:     #FBFAF8;   /* warm neutral, reads as paper not dashboard */
  --mc-c-linen:     #F4F1EC;
  --mc-c-oat:       #EAE5DC;
  --mc-c-sand:      #E3DFD8;
  --mc-c-stone:     #8D8374;
  --mc-c-slate:     #626C6F;
  --mc-c-graphite:  #5B6467;
  --mc-c-ink:       #14181A;

  --mc-c-green-100: #E8F3EE;
  --mc-c-green-200: #A9D8C6;
  --mc-c-green-300: #7FD4B8;
  --mc-c-green-500: #21856C;
  --mc-c-green-700: #0F5C4A;   /* the single primary */
  --mc-c-green-800: #0B4739;
  --mc-c-green-900: #08322A;

  --mc-c-clay-100:  #FBEDE3;
  --mc-c-clay-600:  #B4551F;   /* one warm accent, emphasis + secondary CTA only */
  --mc-c-clay-700:  #8A4A1E;

  --mc-c-amber-100: #FDF6E7;
  --mc-c-amber-700: #7A5310;
  --mc-c-red-100:   #FCEDEC;
  --mc-c-red-700:   #A32020;

  /* ---- semantic surfaces --------------------------------------------- */
  --mc-surface:            var(--mc-c-paper);
  --mc-surface-raised:     #FFFFFF;
  --mc-surface-sunken:     var(--mc-c-linen);
  --mc-surface-brand:      var(--mc-c-green-700);
  --mc-surface-brand-soft: var(--mc-c-green-100);
  --mc-surface-inverse:    var(--mc-c-ink);

  --mc-text:           var(--mc-c-ink);
  --mc-text-muted:     var(--mc-c-graphite);
  --mc-text-subtle:    var(--mc-c-slate);
  --mc-text-brand:     var(--mc-c-green-700);
  --mc-text-accent:    var(--mc-c-clay-700);
  --mc-text-on-brand:  var(--mc-c-paper);
  --mc-text-on-inverse:var(--mc-c-paper);

  --mc-border:         var(--mc-c-sand);
  --mc-border-control: var(--mc-c-stone);
  --mc-border-brand:   var(--mc-c-green-700);

  --mc-status-good-bg:  var(--mc-c-green-100);
  --mc-status-good-fg:  var(--mc-c-green-800);
  --mc-status-watch-bg: var(--mc-c-amber-100);
  --mc-status-watch-fg: var(--mc-c-amber-700);
  --mc-status-alert-bg: var(--mc-c-red-100);
  --mc-status-alert-fg: var(--mc-c-red-700);
  --mc-status-info-bg:  var(--mc-c-clay-100);
  --mc-status-info-fg:  var(--mc-c-clay-700);

  /* ---- type ----------------------------------------------------------- */
  --mc-font-sans: "Inter var", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mc-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --mc-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  --mc-text-2xs: 0.75rem;
  --mc-text-xs:  0.8125rem;
  --mc-text-sm:  0.875rem;
  --mc-text-md:  1rem;
  --mc-text-lg:  clamp(1.0625rem, 1.02rem + 0.21vw, 1.1875rem);
  --mc-text-xl:  clamp(1.25rem,  1.18rem + 0.35vw, 1.4375rem);
  --mc-text-2xl: clamp(1.5rem,   1.36rem + 0.70vw, 1.9375rem);
  --mc-text-3xl: clamp(1.875rem, 1.62rem + 1.27vw, 2.625rem);
  --mc-text-4xl: clamp(2.25rem,  1.80rem + 2.25vw, 3.5rem);
  --mc-text-figure:    clamp(1.75rem, 1.45rem + 1.5vw, 2.5rem);
  --mc-text-figure-sm: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);

  --mc-leading-tight: 1.15;
  --mc-leading-snug:  1.35;
  --mc-leading-body:  1.6;
  --mc-tracking-tight: -0.018em;
  --mc-tracking-wide:  0.06em;
  --mc-tracking-label: 0.1em;

  --mc-weight-regular: 400;
  --mc-weight-medium: 500;
  --mc-weight-semibold: 600;
  --mc-weight-bold: 700;

  /* ---- space, radius, shadow, motion ---------------------------------- */
  --mc-space-0: 0;      --mc-space-1: 0.25rem; --mc-space-2: 0.5rem;
  --mc-space-3: 0.75rem;--mc-space-4: 1rem;    --mc-space-5: 1.25rem;
  --mc-space-6: 1.5rem; --mc-space-8: 2rem;    --mc-space-10: 2.5rem;
  --mc-space-12: 3rem;  --mc-space-16: 4rem;   --mc-space-20: 5rem;
  --mc-space-24: 6rem;

  --mc-radius-sm: 6px;  --mc-radius-md: 10px;  --mc-radius-lg: 14px;
  --mc-radius-xl: 20px; --mc-radius-pill: 999px;

  --mc-shadow-sm: 0 1px 2px rgba(20, 24, 26, .05);
  --mc-shadow-md: 0 2px 4px rgba(20, 24, 26, .05), 0 6px 16px rgba(20, 24, 26, .06);
  --mc-shadow-lg: 0 4px 8px rgba(20, 24, 26, .05), 0 16px 40px rgba(20, 24, 26, .09);

  --mc-duration-fast: 120ms;
  --mc-duration: 180ms;
  --mc-duration-slow: 260ms;
  --mc-ease: cubic-bezier(.2, .8, .3, 1);

  --mc-focus-ring: 0 0 0 2px var(--mc-surface), 0 0 0 4px var(--mc-c-green-700);
  --mc-focus-ring-inverse: 0 0 0 2px var(--mc-c-green-700), 0 0 0 4px var(--mc-c-green-300);

  /* Layout — the design's canvas is 1200px wide with a 40px gutter. */
  --mc-container: 1200px;
  --mc-container-prose: 42rem;
  --mc-gutter: clamp(1.25rem, 0.6rem + 2.6vw, 2.5rem);   /* 20px -> 40px */
  --mc-section-y: clamp(3.5rem, 2.2rem + 5.4vw, 6rem);   /* 56px -> 96px */
  --mc-section-y-lg: clamp(4rem, 2.4rem + 6.6vw, 7rem);  /* 64px -> 112px */

  /* Display sizes taken from the design file. Each clamps to the design's exact
     pixel value at desktop and scales down from there. */
  --mc-d-h1:     clamp(2.375rem, 1.1rem + 5.3vw, 4.25rem);   /* -> 68px */
  --mc-d-h2:     clamp(1.875rem, 1.2rem + 2.8vw, 2.75rem);   /* -> 44px */
  --mc-d-h2-lg:  clamp(2rem, 1.25rem + 3.1vw, 3rem);         /* -> 48px */
  --mc-d-h2-cta: clamp(2.125rem, 1.2rem + 3.9vw, 3.375rem);  /* -> 54px */
  --mc-d-h3-lg:  clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);   /* -> 34px */
  --mc-d-figure: clamp(1.75rem, 1.2rem + 2.3vw, 2.75rem);    /* -> 44px */
  --mc-d-numeral: clamp(2.75rem, 1.6rem + 4.8vw, 4.5rem);    /* -> 72px */

  --mc-d-lead:   1.1875rem;   /* 19px  */
  --mc-d-body:   1.0625rem;   /* 17px  */
  --mc-d-copy:   1rem;        /* 16px  */
  --mc-d-small:  0.96875rem;  /* 15.5px */
  --mc-d-nav:    0.90625rem;  /* 14.5px */
  --mc-d-micro:  0.75rem;     /* 12px  */
  --mc-d-eyebrow-tracking: 0.14em;
  --mc-d-header-h: 72px;

  --mc-control-height: 3rem;
  --mc-control-height-sm: 2.5rem;
  --mc-control-radius: var(--mc-radius-md);
  --mc-control-padding-x: var(--mc-space-3);
  --mc-control-bg: var(--mc-surface-raised);
  --mc-control-border: 1px solid var(--mc-border-control);
  --mc-control-border-focus: var(--mc-c-green-700);

  /* Content sitting on the brand green (the results panel). */
  --mc-on-brand-field-bg: rgba(8, 50, 42, .55);
  --mc-on-brand-border: rgba(251, 250, 248, .28);
  --mc-on-brand-rule: rgba(251, 250, 248, .18);
  --mc-text-on-brand-muted: #D9E7E1;
  --mc-shadow-raised: 0 -4px 24px rgba(20, 24, 26, .18);

  --mc-card-radius: var(--mc-radius-lg);
  --mc-card-border: 1px solid var(--mc-border);
  --mc-card-padding: var(--mc-space-5);
}

/* Dark surfaces are a SECTION treatment (hero, footer, results panel), not a
   full site theme in release 1 — the design system's own decision. Scoping the
   dark palette here keeps application CSS free of raw colour values. */
.mc-inverse {
  --mc-surface: var(--mc-c-ink);
  --mc-surface-sunken: #1B2124;
  --mc-surface-raised: #222A2D;
  --mc-text: var(--mc-c-paper);
  --mc-text-muted: #A8B2B4;
  --mc-text-subtle: #8E9A9C;
  --mc-text-brand: var(--mc-c-green-300);
  --mc-border: #2E383B;
  --mc-border-control: #6F7C7F;
  --mc-focus-ring: var(--mc-focus-ring-inverse);
}

/* Motion is purposeful or absent. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --mc-duration-fast: 0ms;
    --mc-duration: 0ms;
    --mc-duration-slow: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}