/* IDPE Design System — Tokens */

@font-face {
  font-family: "Sora";
  src: url("assets/fonts/Sora-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("assets/fonts/Sora-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("assets/fonts/Sora-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("assets/fonts/Sora-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("assets/fonts/Sora-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand Blue — extracted from official logo files (#00408F)
     Step ramp derived from oklch interpolation to white and to black. */
  --idpe-cobalt-950: #00112a;
  --idpe-cobalt-900: #00204f;
  --idpe-cobalt-850: #003075;
  --idpe-cobalt-800: #00408f; /* PRIMARY — official brand */
  --idpe-cobalt-750: #003983; /* secondary brand shade in print pieces */
  --idpe-cobalt-700: #1f59a8;
  --idpe-cobalt-600: #3e74c1;
  --idpe-cobalt-500: #6791d4;
  --idpe-cobalt-400: #93b1e2;
  --idpe-cobalt-300: #bdcfed;
  --idpe-cobalt-200: #dde7f5;
  --idpe-cobalt-100: #ebf1fa;
  --idpe-cobalt-50:  #f6f9fd;

  /* Ink — pure neutrals (cool, matching brand) */
  --idpe-ink-950: #0b0b10; /* near-black, used in logo accents */
  --idpe-ink-900: #16161d;
  --idpe-ink-800: #20212b;
  --idpe-ink-700: #2d2e3d;
  --idpe-ink-600: #4c4e60;
  --idpe-ink-500: #6d6f82;
  --idpe-ink-400: #93959f;
  --idpe-ink-300: #b8babf;
  --idpe-ink-200: #d6d7da;
  --idpe-ink-100: #e8e9eb;
  --idpe-ink-50:  #f3f4f6;

  /* Surface — pure-white system (per official manual) */
  --idpe-surface-0:   #ffffff; /* canvas — pure white */
  --idpe-surface-50:  #fafbfc; /* faintest tint, for hover */
  --idpe-surface-100: #f3f4f6; /* subtle section break */
  --idpe-surface-200: #e8e9eb; /* card divider */

  /* Accent — digital extension proposal (NOT in original print manual).
     Used sparingly for editorial markers and tertiary CTAs. */
  --idpe-accent-700: #8a6c25;
  --idpe-accent-600: #a98330;
  --idpe-accent-500: #c8a24b;
  --idpe-accent-400: #d8b97a;
  --idpe-accent-300: #e6d2a4;
  --idpe-accent-100: #f3e8cf;

  /* Legacy aliases (back-compat with v1 code) */
  --idpe-paper-100: var(--idpe-surface-0);
  --idpe-paper-200: var(--idpe-surface-100);
  --idpe-paper-300: var(--idpe-surface-200);
  --idpe-brass-700: var(--idpe-accent-700);
  --idpe-brass-600: var(--idpe-accent-600);
  --idpe-brass-500: var(--idpe-accent-500);
  --idpe-brass-400: var(--idpe-accent-400);
  --idpe-brass-300: var(--idpe-accent-300);
  --idpe-brass-100: var(--idpe-accent-100);

  /* Semantic */
  --idpe-success: #2e7d5b;
  --idpe-warning: #b58423;
  --idpe-danger:  #b3361f;
  --idpe-info:    #1a4ca8;

  /* Aliases (light theme default) — pure-white canvas per brand manual */
  --bg: var(--idpe-surface-0);
  --bg-subtle: var(--idpe-surface-100);
  --bg-elev: #ffffff;
  --bg-deep: var(--idpe-cobalt-950);
  --fg: var(--idpe-ink-950);
  --fg-muted: var(--idpe-ink-600);
  --fg-faint: var(--idpe-ink-400);
  --rule: var(--idpe-ink-200);
  --rule-soft: var(--idpe-ink-100);
  --rule-strong: var(--idpe-ink-800);
  --primary: var(--idpe-cobalt-800);
  --primary-deep: var(--idpe-cobalt-750);
  --primary-hover: var(--idpe-cobalt-900);
  --primary-fg: #ffffff;
  --accent: var(--idpe-accent-500);

  /* Type */
  --font-sans: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* Type scale (editorial) */
  --fs-display-2xl: clamp(72px, 9vw, 132px);
  --fs-display-xl:  clamp(56px, 6.5vw, 96px);
  --fs-display-lg:  clamp(44px, 5vw, 72px);
  --fs-h1: clamp(36px, 4vw, 56px);
  --fs-h2: clamp(28px, 3vw, 40px);
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-body-lg: 19px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;
  --fs-eyebrow: 11px;

  /* Leading */
  --lh-display: 0.96;
  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  /* Tracking */
  --tr-tight: -0.02em;
  --tr-snug: -0.01em;
  --tr-normal: 0;
  --tr-wide: 0.06em;
  --tr-eyebrow: 0.18em;

  /* Spacing scale (4-based) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;
  --s-40: 160px;

  /* Radii — editorial = mostly square */
  --r-none: 0;
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;
  --r-pill: 999px;

  /* Container */
  --container: 1280px;
  --container-narrow: 880px;

  /* Shadows — restrained */
  --shadow-sm: 0 1px 2px rgba(10,14,26,0.06);
  --shadow-md: 0 8px 24px -8px rgba(10,14,26,0.12);
  --shadow-lg: 0 24px 48px -16px rgba(10,14,26,0.18);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

[data-theme="dark"] {
  --bg: #0b0b10;
  --bg-subtle: #16161d;
  --bg-elev: #16161d;
  --bg-deep: #00112a;
  --fg: #f3f4f6;
  --fg-muted: #93959f;
  --fg-faint: #6d6f82;
  --rule: #2d2e3d;
  --rule-soft: #20212b;
  --rule-strong: #b8babf;
  --primary: var(--idpe-cobalt-500);
  --primary-deep: var(--idpe-cobalt-600);
  --primary-hover: var(--idpe-cobalt-400);
  --primary-fg: #00112a;
  --accent: var(--idpe-accent-400);
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Selection */
::selection { background: var(--idpe-cobalt-800); color: #fff; }