/* M11 Design System — Colors & Type
 * "The Architectural Minimalist" — luxury light-theme, sans-serif only.
 * Sources: my_design_system/DESIGN.md, stitch_m11_portal-1 (Material Token map),
 * M11-Updates src/App.tsx (investor-facing Apple-style variant).
 */

/* Fonts are loaded via Google Fonts in each audit-page <link> tag
   (Inter + Manrope). The local @font-face declarations that used to
   live here pointed at ./fonts/*.ttf which we don't ship - they
   404'd silently and were redundant with the Google Fonts link. */

:root {
  /* ========== CORE PALETTE (Material Token Map from Portal) ========== */
  /* Primary — "The Pulse". Health & active momentum. Deep forest green. */
  --m11-primary: #005440;
  --m11-primary-container: #0F6E56;
  --m11-on-primary: #ffffff;
  --m11-on-primary-container: #9aedcf;
  --m11-primary-fixed: #a0f3d4;
  --m11-primary-fixed-dim: #84d6b9;
  --m11-on-primary-fixed: #002117;
  --m11-on-primary-fixed-variant: #00513e;
  --m11-inverse-primary: #84d6b9;
  --m11-surface-tint: #086b53;

  /* Secondary — Knowledge Graph purple. Reserved for data relationships. */
  --m11-secondary: #584fbc;
  --m11-secondary-container: #958dff;
  --m11-on-secondary: #ffffff;
  --m11-on-secondary-container: #2b1c8f;
  --m11-secondary-fixed: #e3dfff;
  --m11-secondary-fixed-dim: #c5c0ff;

  /* Tertiary — Info blue, links only. */
  --m11-tertiary: #004891;
  --m11-tertiary-container: #0760bb;
  --m11-on-tertiary: #ffffff;
  --m11-on-tertiary-container: #cedeff;
  --m11-tertiary-fixed: #d6e3ff;
  --m11-tertiary-fixed-dim: #a9c7ff;

  /* Error — Critical red. */
  --m11-error: #ba1a1a;
  --m11-error-container: #ffdad6;
  --m11-on-error: #ffffff;
  --m11-on-error-container: #93000a;

  /* ========== SURFACE HIERARCHY — "stacked sheets of fine paper" ========== */
  /* Level 0 — global stage */
  --m11-surface: #f9f9f7;
  --m11-background: #f9f9f7;
  --m11-surface-bright: #f9f9f7;

  /* Level 1 — sidebar, sub-sections */
  --m11-surface-container-low: #f4f4f2;
  --m11-surface-container: #eeeeec;

  /* Level 2 — cards (primary focal points) */
  --m11-surface-container-lowest: #ffffff;

  /* Hover / selected row */
  --m11-surface-container-high: #e8e8e6;
  --m11-surface-container-highest: #e2e3e1;
  --m11-surface-variant: #e2e3e1;
  --m11-surface-dim: #dadad8;

  --m11-inverse-surface: #2f3130;
  --m11-inverse-on-surface: #f1f1ef;

  /* ========== FOREGROUND / INK ========== */
  /* Never pure black. Deep warm graphite. */
  --m11-on-surface: #1a1c1b;
  --m11-on-background: #1a1c1b;
  --m11-on-surface-variant: #3f4944;

  /* Ghost borders — "felt, not seen" */
  --m11-outline: #6f7a74;
  --m11-outline-variant: #bec9c3;

  /* ========== SEMANTIC FG/BG TOKENS ========== */
  --fg-1: var(--m11-on-surface);          /* primary ink */
  --fg-2: var(--m11-on-surface-variant);  /* secondary ink */
  --fg-3: var(--m11-outline);             /* tertiary ink / metadata */
  --fg-4: var(--m11-outline-variant);     /* whisper ink / disabled */
  --bg-0: var(--m11-surface);
  --bg-1: var(--m11-surface-container-low);
  --bg-2: var(--m11-surface-container-lowest);
  --bg-hover: var(--m11-surface-container-high);

  /* ========== TYPOGRAPHY SYSTEM ========== */
  /* Sans-serif only — Manrope for authoritative display, Inter for utility. */
  --font-display: 'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-label:   'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Editorial scale */
  --text-display-xl:  4.5rem;   /* 72 — hero numbers, health score */
  --text-display-lg:  3.5rem;   /* 56 — hero headline */
  --text-display-md:  2.5rem;   /* 40 — page titles */
  --text-headline-lg: 2rem;     /* 32 */
  --text-headline-md: 1.5rem;   /* 24 — section headers */
  --text-headline-sm: 1.25rem;  /* 20 */
  --text-title-md:    1.125rem; /* 18 — sub-headers */
  --text-body-lg:     1rem;     /* 16 */
  --text-body-md:     0.875rem; /* 14 — utility body */
  --text-body-sm:     0.8125rem;/* 13 */
  --text-label-md:    0.75rem;  /* 12 */
  --text-label-sm:    0.6875rem;/* 11 — metadata ALL CAPS */
  --text-label-xs:    0.625rem; /* 10 — finest eyebrow */

  /* Weights — sans-serif only */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Tracking — tightens as scale grows (editorial tension) */
  --tracking-tightest: -0.05em;
  --tracking-tighter:  -0.04em;
  --tracking-tight:    -0.025em;
  --tracking-normal:   0;
  --tracking-wide:     0.025em;
  --tracking-wider:    0.05em;   /* eyebrow + metadata (ALL CAPS) */
  --tracking-widest:   0.2em;    /* "Enterprise Design Management" */

  /* Line heights */
  --leading-none:    1;
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  /* ========== SPACING ========== */
  /* Editorial rhythm — big margins between content blocks. */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;    /* block-to-block */
  --space-20: 5rem;

  /* ========== RADII ========== */
  /* Two live scales: "Editorial" (tight, per DESIGN.md) and "Soft" (Tesla button variant). */
  --radius-xs:   0.125rem;
  --radius-sm:   0.25rem;  /* default */
  --radius-md:   0.5rem;   /* lg / Tesla button / inputs */
  --radius-lg:   0.75rem;  /* xl / cards */
  --radius-xl:   1rem;     /* chips, progressive disclosure */
  --radius-2xl:  1.5rem;   /* floating panels */
  --radius-3xl:  2rem;     /* bento hero tiles */
  --radius-full: 9999px;

  /* ========== ELEVATION — "Tonal Layering" over drop shadows ========== */
  --shadow-ambient:  0 12px 32px rgba(26, 28, 27, 0.06);
  --shadow-card:     0 4px 12px rgba(26, 28, 27, 0.02);
  --shadow-card-hover: 0 12px 32px rgba(26, 28, 27, 0.04);
  --shadow-float:    0 20px 50px rgba(0, 0, 0, 0.04);
  --shadow-glass:    0 8px 32px rgba(31, 38, 135, 0.05);
  --ghost-border:    1px solid rgba(190, 201, 195, 0.15);

  /* ========== MOTION — "Industrial, weighted, deliberate" ========== */
  --ease-industrial: cubic-bezier(0.4, 0, 0.2, 1); /* linear-out-slow-in */
  --ease-out:        cubic-bezier(0.0, 0, 0.2, 1);
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   500ms;

  /* ========== GLASS ========== */
  --glass-bg:   rgba(255, 255, 255, 0.65);
  --glass-bg-lite: rgba(255, 255, 255, 0.4);
  --glass-blur: saturate(180%) blur(20px);
  --glass-border: 1px solid rgba(255, 255, 255, 0.8);
}

/* ========== SEMANTIC BASE STYLES ========== */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  color: var(--fg-1);
  background: var(--bg-0);
  font-weight: var(--fw-regular);
  letter-spacing: -0.01em;
  line-height: var(--leading-normal);
}

h1, .m11-h1 {
  font-family: var(--font-display);
  font-size: var(--text-display-lg);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tightest);
  line-height: var(--leading-tight);
  color: var(--fg-1);
}
h2, .m11-h2 {
  font-family: var(--font-display);
  font-size: var(--text-display-md);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tighter);
  line-height: var(--leading-tight);
}
h3, .m11-h3 {
  font-family: var(--font-display);
  font-size: var(--text-headline-md);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
}
h4, .m11-h4 {
  font-family: var(--font-display);
  font-size: var(--text-headline-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
}
p, .m11-p {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
}
.m11-eyebrow {
  font-family: var(--font-label);
  font-size: var(--text-label-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-3);
}
.m11-metadata {
  font-family: var(--font-label);
  font-size: var(--text-label-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-3);
}
.m11-power-stat {
  font-family: var(--font-display);
  font-size: var(--text-display-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tightest);
  line-height: var(--leading-none);
  color: var(--m11-primary);
}
code, .m11-code {
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  color: var(--fg-2);
}

/* Selection */
::selection { background: var(--m11-on-primary-container); color: var(--m11-primary); }