/* ============================================================================
   Mildred design tokens
   Shared by MCSL and Mildred Group. scripts/sync-shared-frontend.sh in the
   group repository copies this file, so edit it here only.

   Every colour, type size, space, radius, border, shadow, and timing used by
   the stylesheets comes from this file. Components read the semantic tokens
   (--color-*, --text-*, --space-*, ...). The short legacy names at the end
   (--navy, --teal, --r-md, ...) point at the same values so older rules keep
   working while they are moved over.

   Contrast: every text pairing below was checked against WCAG 2.2 AA.
   Small text on light surfaces uses the -ink variants (teal 6.3:1, gold
   5.9:1). Brand teal and gold are for fills, icons, and large text.
   ============================================================================ */

:root {
  /* ── Brand primitives ─────────────────────────────────────────────────── */
  --mg-navy-950: #030D1C;
  --mg-navy-900: #071A35;   /* brand navy: text, outlines, shadows */
  --mg-navy-800: #0D2B55;
  --mg-navy-700: #1A4080;
  --mg-navy-200: #C9D6EA;
  --mg-navy-100: #E6EDF7;

  --mg-teal-500: #00C2CB;   /* brand teal */
  --mg-teal-600: #009FAA;
  --mg-teal-700: #007C85;
  --mg-teal-800: #006B73;   /* teal text on light surfaces */
  --mg-teal-200: #A9EEF1;
  --mg-teal-100: #D2F6F8;
  --mg-teal-50:  #EAFBFC;

  --mg-gold-400: #FFC83D;
  --mg-gold-500: #FFB703;   /* brand gold */
  --mg-gold-600: #E09800;
  --mg-gold-800: #8A5A00;   /* gold text on light surfaces */
  --mg-gold-100: #FFF1C7;
  --mg-gold-50:  #FFF8E5;

  --mg-indigo-500: #4F46E5;
  --mg-indigo-800: #3730A3;
  --mg-indigo-100: #E4E3FC;
  --mg-rose-500:   #F43F5E;
  --mg-rose-800:   #9F1239;
  --mg-rose-100:   #FFE2E7;
  --mg-mint-500:   #10B981;
  --mg-mint-800:   #065F46;
  --mg-mint-100:   #D5F7EA;

  --mg-white: #FFFFFF;
  --mg-paper: #FBF8F1;      /* warm off-white for alternating sections */
  --mg-ink-soft: #33415A;
  --mg-muted: #536079;
  --mg-line: #D6DEE9;

  /* ── Semantic colours ─────────────────────────────────────────────────── */
  --color-bg: var(--mg-white);
  --color-bg-alt: var(--mg-paper);
  --color-bg-tint: var(--mg-teal-50);
  --color-bg-warm: var(--mg-gold-50);
  --color-surface: var(--mg-white);
  --color-surface-sunken: #F4F7FB;
  --color-ink: var(--mg-navy-900);
  --color-text: var(--mg-navy-900);
  --color-text-body: var(--mg-ink-soft);
  --color-text-muted: var(--mg-muted);
  --color-line: var(--mg-line);
  --color-line-strong: var(--mg-navy-900);
  --color-input-line: #5B6B82;

  --color-primary: var(--mg-teal-500);
  --color-primary-strong: var(--mg-teal-600);
  --color-primary-ink: var(--mg-teal-800);
  --color-primary-soft: var(--mg-teal-100);
  --color-on-primary: var(--mg-navy-900);
  --color-accent: var(--mg-gold-500);
  --color-accent-strong: var(--mg-gold-600);
  --color-accent-ink: var(--mg-gold-800);
  --color-accent-soft: var(--mg-gold-100);
  --color-on-accent: var(--mg-navy-900);

  --color-dark: var(--mg-navy-900);
  --color-dark-raised: var(--mg-navy-800);
  --color-on-dark: var(--mg-white);
  --color-on-dark-muted: #C3D0E3;
  --color-on-dark-line: rgba(255, 255, 255, .22);
  --color-dot: rgba(255, 255, 255, .09);
  --color-dot-light: rgba(7, 26, 53, .08);

  --color-success: #166534;
  --color-success-bg: #DCFCE7;
  --color-warning: #92400E;
  --color-warning-bg: #FEF3C7;
  --color-danger: #B91C1C;
  --color-danger-bg: #FEE2E2;
  --color-info: #1E40AF;
  --color-info-bg: #DBEAFE;

  --color-focus: var(--mg-indigo-500);
  --color-focus-on-dark: var(--mg-gold-500);
  --color-selection: var(--mg-gold-100);

  /* Pastel tiles for icons and illustrations, each with its readable ink. */
  --tone-teal-bg: var(--mg-teal-100);    --tone-teal-ink: var(--mg-navy-800);
  --tone-gold-bg: var(--mg-gold-100);    --tone-gold-ink: var(--mg-navy-900);
  --tone-indigo-bg: var(--mg-indigo-100); --tone-indigo-ink: var(--mg-indigo-800);
  --tone-rose-bg: var(--mg-rose-100);    --tone-rose-ink: var(--mg-rose-800);
  --tone-mint-bg: var(--mg-mint-100);    --tone-mint-ink: var(--mg-mint-800);
  --tone-slate-bg: var(--mg-navy-100);   --tone-slate-ink: var(--mg-navy-800);

  /* ── Type ─────────────────────────────────────────────────────────────── */
  --font-display: 'Fredoka', 'Nunito', ui-rounded, 'Arial Rounded MT Bold', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-2xs: .6875rem;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-md: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-xl: clamp(1.25rem, 1.12rem + .55vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  --text-3xl: clamp(1.875rem, 1.45rem + 1.9vw, 2.75rem);
  --text-4xl: clamp(2.25rem, 1.6rem + 3vw, 3.75rem);
  --text-5xl: clamp(2.5rem, 1.7rem + 4vw, 4.75rem);

  --leading-tight: 1.08;
  --leading-snug: 1.22;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

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

  --tracking-tight: -.012em;
  --tracking-normal: 0;
  --tracking-wide: .06em;
  --tracking-wider: .12em;

  /* ── Space (4 px steps) ───────────────────────────────────────────────── */
  --space-0: 0;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;
  --space-10: 4rem;
  --space-11: 5rem;
  --space-12: 6rem;
  --section-y: clamp(3.5rem, 7vw, 6.5rem);
  --gutter: clamp(1rem, 4vw, 2rem);
  --container: 1200px;
  --container-wide: 1320px;
  --header-h: 72px;

  /* ── Shape ────────────────────────────────────────────────────────────── */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-btn: 14px;
  --radius-pill: 999px;

  --border-thin: 1.5px;
  --border: 2px;
  --border-thick: 3px;

  /* Hard offset shadows give components their sticker look. */
  --shadow-pop-xs: 2px 2px 0 var(--mg-navy-900);
  --shadow-pop-sm: 3px 3px 0 var(--mg-navy-900);
  --shadow-pop: 5px 5px 0 var(--mg-navy-900);
  --shadow-pop-lg: 8px 8px 0 var(--mg-navy-900);
  --shadow-pop-teal: 5px 5px 0 var(--mg-teal-500);
  --shadow-pop-gold: 5px 5px 0 var(--mg-gold-500);
  --shadow-pop-quiet: 4px 4px 0 rgba(7, 26, 53, .12);
  --shadow-soft: 0 10px 28px rgba(7, 26, 53, .12);
  --shadow-float: 0 18px 44px rgba(7, 26, 53, .2);

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: 140ms;
  --dur: 220ms;
  --dur-slow: 480ms;
  --lift: translate(-2px, -2px);
  --press: translate(3px, 3px);

  /* ── Layers ───────────────────────────────────────────────────────────── */
  --z-header: 1000;
  --z-modal: 2000;
  --z-skip: 3000;

  /* ── Legacy names used by older rules ─────────────────────────────────── */
  --navy: var(--mg-navy-900);
  --navy-mid: var(--mg-navy-800);
  --navy-light: var(--mg-navy-700);
  --teal: var(--mg-teal-500);
  --teal-deep: var(--mg-teal-800);
  --teal-pale: var(--mg-teal-100);
  --gold: var(--mg-gold-500);
  --gold-deep: var(--mg-gold-600);
  --gold-pale: var(--mg-gold-100);
  --indigo: var(--mg-indigo-500);
  --emerald: var(--mg-mint-500);
  --rose: var(--mg-rose-500);
  --white: var(--mg-white);
  --off-white: var(--mg-paper);
  --slate: var(--color-surface-sunken);
  --text: var(--color-text);
  --text-mid: var(--color-text-body);
  --text-soft: var(--color-text-muted);
  --border-color: var(--color-line);

  --grad-hero: var(--mg-navy-900);
  --grad-teal: var(--mg-teal-500);
  --grad-gold: var(--mg-gold-500);
  --grad-cta: var(--mg-teal-500);
  --grad-text: var(--mg-teal-500);

  --shadow-sm: var(--shadow-pop-quiet);
  --shadow-md: var(--shadow-pop-sm);
  --shadow-lg: var(--shadow-pop);
  --shadow-teal: var(--shadow-pop-sm);
  --shadow-gold: var(--shadow-pop-sm);
  --glow-teal: var(--shadow-soft);

  --py: var(--section-y);
  --r-sm: var(--radius-sm);
  --r-md: var(--radius-md);
  --r-lg: var(--radius-lg);
  --r-full: var(--radius-pill);
  --ease: var(--ease-out);
  --t: var(--dur) var(--ease-out);
  --t-slow: var(--dur-slow) var(--ease-out);
}

/* ── Base elements ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: inherit;
}

::selection { background: var(--color-selection); color: var(--color-ink); }

/* One visible focus style everywhere. Dark surfaces switch to gold. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--border-thick) solid var(--color-focus);
  outline-offset: 3px;
}
:where(.on-dark, .hero, .site-footer, .group-footer, .group-hero, .impact-section, .section-dark,
       .careers-hero, .news-hero, .compliance-hero, .sopsd-hero, .auth-intro, .dashboard-sidebar,
       .portal-sidebar, .cta-section) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: var(--color-focus-on-dark);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Reduced motion: no transforms, no reveal fades, no looping decoration. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  .scroll-reveal, .scroll-reveal.fade-left, .scroll-reveal.fade-right {
    opacity: 1 !important;
    transform: none !important;
  }
}