/*
 * Natus Energy — design tokens
 *
 * LOCKED to the Tone Interiors palette per Graeme directive 4 May 2026
 * (Session 196 part 4). This is an explicit operator override of the
 * "Tone palette is for Tone-only" rule in the root project rules; Graeme
 * has applied this palette as the gold standard across the estate.
 *
 * Visual register: ivory-dominant, light, fresh, airy. NOT dark, NOT
 * industrial, NOT moody. Same look as toneinteriors.co.uk.
 *
 * Hex values match the Tone Interiors Brand Guidelines exactly.
 * Do NOT use the FMB Platform Default Palette (navy + bronze) here.
 * Do NOT invent new colours. Do NOT bring back the previous "deep blue
 * + green" Session 196 part 2 draft.
 *
 * Design principles attached to this palette (from Tone brand guidelines):
 *  - Box shapes: very slightly rounded corners. Never pill-shaped.
 *  - Ivory-dominant overall feel — must be used more than any other.
 *  - High contrast for text and design elements; never overcrowded.
 *  - Typography at correct weight, never busy.
 *  - Coffee #7D6C58 used SPARINGLY as accent — not as a dominant colour.
 */

:root {
  /* ── Tone Interiors palette (canonical hex values) ───────────────────── */
  --c-stone:     #F2F0ED;   /* lightest — text-heavy backgrounds, especially print */
  --c-ivory:     #E8E2D8;   /* DOMINANT background — must be used more than any other */
  --c-charcoal:  #2C2D2C;   /* text and logos */
  --c-forest:    #444C42;   /* softer alternative for dark colour use */
  --c-pistachio: #7A8178;   /* softer alternative for backgrounds */
  --c-coffee:    #7D6C58;   /* accent and decorative elements only — sparingly */

  /* ── Status colours (used sparingly) ─────────────────────────────────── */
  --c-danger:    #c53030;   /* red — outage cost callouts, error states */
  --c-success:   #5a7a52;   /* tone-coherent green — success states only */

  /* ── Aliases so existing var(--c-*) references in main.css continue to */
  /* resolve cleanly through the indirection layer. ──────────────────── */
  --c-navy:                 var(--c-ivory);     /* "primary background" → ivory */
  --c-navy-card:            var(--c-stone);     /* "card surface" → stone */
  --c-navy-hover:           #DDD6CB;            /* slight tonal step from ivory */
  --c-near-black:           var(--c-ivory);
  --c-deep-blue:            var(--c-charcoal);
  --c-deep-blue-2:          var(--c-forest);
  --c-white:                var(--c-stone);
  --c-pale-bg:              var(--c-stone);
  --c-pale-line:            rgba(124, 108, 88, 0.18); /* coffee 18% — visible on ivory */
  --c-bronze:               var(--c-coffee);    /* "accent" → coffee */
  --c-bronze-light:         #94836A;            /* light coffee */
  --c-bronze-deep:          #5E5141;            /* deeper coffee for hover */
  --c-bronze-border:        rgba(124, 108, 88, 0.18);
  --c-bronze-border-h:      rgba(124, 108, 88, 0.45);
  --c-bronze-glow:          rgba(124, 108, 88, 0.10);
  --c-accent:               var(--c-coffee);
  --c-accent-hover:         var(--c-bronze-deep);
  --c-accent-pale:          rgba(124, 108, 88, 0.10);
  --c-cream:                var(--c-charcoal);  /* on light bg, "primary text" → charcoal */
  --c-warm-taupe:           var(--c-forest);    /* "secondary text" → forest */
  --c-muted-brown:          var(--c-pistachio); /* "muted text" → pistachio */
  --c-text-on-dark:         var(--c-ivory);     /* on the rare dark band, text is ivory */
  --c-text-on-dark-muted:   #C2BBB0;            /* muted ivory for dark sections */
  --c-text-on-light:        var(--c-charcoal);
  --c-text-on-light-muted:  var(--c-forest);
  --c-border:               var(--c-bronze-border);
  --c-warn:                 #c08838;

  /* ── Type scale (unchanged) ──────────────────────────────────────────── */
  --f-display: Georgia, "Cormorant Garamond", "Times New Roman", "Iowan Old Style", serif;
  --f-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-mono: "SF Mono", Menlo, Consolas, Monaco, monospace;

  --t-h1:    clamp(2.4rem, 4.8vw + 1rem, 5.4rem);
  --t-h1-l:  clamp(2.8rem, 6vw + 1rem, 6.6rem);
  --t-h2:    clamp(1.9rem, 2.4vw + 1rem, 2.9rem);
  --t-h3:    clamp(1.35rem, 1.2vw + 0.9rem, 1.7rem);
  --t-h4:    clamp(1.15rem, 0.6vw + 0.95rem, 1.35rem);
  --t-body:  clamp(1.0rem, 0.2vw + 0.95rem, 1.075rem);
  --t-lead:  clamp(1.1rem, 0.6vw + 0.95rem, 1.35rem);
  --t-small: 0.85rem;
  --t-tiny:  0.75rem;

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-body: 1.6;
  --lh-loose: 1.75;

  --weight-thin: 300;
  --weight-light: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* ── Spacing scale ──────────────────────────────────────────────────── */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --s-11: 12rem;

  /* ── Layout containers ──────────────────────────────────────────────── */
  --w-narrow: 720px;
  --w-content: 1080px;
  --w-wide: 1240px;

  /* ── Radii — Tone design principle: very slightly rounded, NEVER pill ── */
  --r-sm: 3px;
  --r-md: 6px;          /* canonical "very slightly rounded" — use everywhere */
  --r-lg: 10px;         /* upper bound on rounding */
  --r-pill: 6px;        /* DEFANGED — was 999px; pill-shapes forbidden by Tone spec */

  /* ── Shadows — soft, ivory-coherent ─────────────────────────────────── */
  --sh-sm: 0 1px 2px rgba(44, 45, 44, 0.06);
  --sh-md: 0 4px 16px rgba(44, 45, 44, 0.08);
  --sh-lg: 0 12px 36px rgba(44, 45, 44, 0.10);
  --sh-bronze: 0 12px 32px rgba(124, 108, 88, 0.14);

  /* ── Motion ─────────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-quick: 160ms;
  --t-norm: 280ms;
  --t-slow: 480ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-quick: 0ms;
    --t-norm: 0ms;
    --t-slow: 0ms;
  }
}