/* SEC design tokens — from sec_desgin.md */

@font-face {
  font-family: "Metropolis";
  src: url("../fonts/Metropolis-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Metropolis";
  src: url("../fonts/Metropolis-Medium.otf") format("opentype"),
       url("../fonts/Metropolis-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Metropolis";
  src: url("../fonts/Metropolis-SemiBold.otf") format("opentype"),
       url("../fonts/Metropolis-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Metropolis";
  src: url("../fonts/Metropolis-Bold.otf") format("opentype"),
       url("../fonts/Metropolis-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Metropolis";
  src: url("../fonts/Metropolis-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Surfaces */
  --color-surface-base: #000000;
  --color-surface-muted: #1f1b19;
  --color-surface-raised: #ffffff;
  --color-surface-strong: #ff6f20;
  --color-surface-neutral: #d9d2cb;
  --color-surface-stone: #6f6660;

  /* Text */
  --color-text-primary: #f5f2ef;
  --color-text-inverse: #cbc5c7;
  --color-text-tertiary: #6f635f;
  --color-text-on-strong: #ffffff;
  --color-text-on-neutral: #2a2522;

  /* Borders */
  --color-border-muted: #1a1715;
  --color-border-strong: #ff6f20;

  /* Typography */
  --font-primary: "Metropolis", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs-md: 16px;
  --fs-lg: 20px;
  --fs-xl: 28px;
  --fs-2xl: 36px;
  --fs-3xl: 40px;
  --fs-4xl: 52px;
  --fs-5xl: clamp(2.75rem, 6vw, 5.5rem);
  --fs-6xl: clamp(3.5rem, 10vw, 9rem);
  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-base: 1.6;

  /* Space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Radius / shadow / motion */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-1: 0 12px 28px rgba(0,0,0,.28), 0 4px 10px rgba(0,0,0,.18);
  --shadow-2: 0 24px 60px rgba(0,0,0,.45), 0 8px 20px rgba(0,0,0,.25);

  /* Motion — Premium archetype (Emil Kowalski / Material 3 emphasized) */
  --motion-instant: 240ms;   /* hover / icon swap */
  --motion-fast: 320ms;      /* small UI feedback */
  --motion-normal: 480ms;    /* standard entrance / state */
  --motion-slow: 720ms;      /* dramatic reveal */

  /* Signature easing — used for 80% of animations */
  --ease-out:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1); /* entrances */
  --ease-accelerate: cubic-bezier(0.3, 0, 1, 1);      /* exits */
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);      /* on-screen */

  /* Layout */
  --container-max: 1440px;
  --container-pad: clamp(20px, 4vw, 64px);
  --header-h: 84px;
}