/* ==========================================================================
   DESIGN TOKENS — Alina Petre 1.3 “Silver noir”
   Deep night surfaces alternate with ivory and pearl. Headings are written in
   a calligraphic script with a silver, three-dimensional finish; the warm
   gold of the logo ring is kept for small accents and the logo red only for
   a few micro details.
   ========================================================================== */
:root {
  /* Night (dark surfaces) */
  --night-950: #0b0c10;
  --night-900: #111318;
  --night-850: #161920;
  --night-800: #1d2029;
  --night-700: #2a2e39;

  /* Light surfaces */
  --paper: #fcfbf8;
  --ivory: #f7f4ee;
  --pearl: #efece6;
  --mist: #e2ded6;

  /* Text */
  --ink: #18191d;
  --ink-soft: #3d4048;
  --ink-muted: #5c5f67;
  --on-dark: #eceef1;
  --on-dark-soft: #c3c7ce;
  --on-dark-muted: #9aa0a9;

  /* Accents */
  --gold: #c7a466;
  --gold-soft: #e2cb98;
  --gold-deep: #80612a;
  --red: #b5121b;

  /* Silver */
  --silver-50: #ffffff;
  --silver-100: #f1f3f5;
  --silver-200: #dfe2e6;
  --silver-300: #c3c8cf;
  --silver-400: #a3a9b2;
  --silver-500: #858b94;
  --silver-600: #646a72;
  --silver-700: #4a4f56;
  --silver-800: #33373c;

  /* Metallic gradients for script headings */
  --silver-on-dark: linear-gradient(178deg, #ffffff 0%, #eef0f3 16%, #c4c9d0 38%, #f8f9fa 54%, #9ea5ae 74%, #dde0e5 100%);
  --silver-on-light: linear-gradient(178deg, #6f767f 0%, #3f454c 30%, #787f88 48%, #33383e 66%, #5d636b 100%);
  --silver-button: linear-gradient(180deg, #fbfbfc 0%, #dfe3e7 42%, #c4c9d0 58%, #eef0f2 100%);
  --silver-line: linear-gradient(90deg, transparent, rgba(223, 226, 230, 0.75), transparent);
  --gold-line: linear-gradient(90deg, transparent, rgba(199, 164, 102, 0.8), transparent);

  /* Typography */
  --font-script: "Great Vibes", "Segoe Script", "Brush Script MT", cursive;
  --font-serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-sans: "Jost", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-xs: 0.8rem;
  --fs-sm: 0.92rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.2rem;
  --fs-lg: 1.45rem;
  --fs-xl: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem);
  --fs-h2: clamp(2.9rem, 2rem + 4vw, 5.2rem);
  --fs-h1: clamp(3.4rem, 2rem + 7vw, 8rem);

  /* Spacing */
  --sp-2xs: 0.375rem;
  --sp-xs: 0.625rem;
  --sp-sm: 1rem;
  --sp-md: 1.5rem;
  --sp-lg: 2.5rem;
  --sp-xl: 4rem;
  --sp-2xl: 6rem;
  --section-y: clamp(4.5rem, 3rem + 6vw, 9rem);
  --container: 1220px;
  --container-narrow: 820px;
  --gutter: clamp(1rem, 4vw, 3rem);
  --header-h: 84px;

  /* Shape */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 2px 10px rgba(17, 19, 24, 0.06);
  --shadow-md: 0 14px 34px rgba(17, 19, 24, 0.10);
  --shadow-lg: 0 28px 70px rgba(17, 19, 24, 0.18);
  --shadow-silver: 0 10px 30px rgba(195, 200, 207, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.35) inset;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-write: cubic-bezier(0.55, 0, 0.25, 1);
  --dur-fast: 220ms;
  --dur-med: 520ms;
  --dur-slow: 1100ms;

  --z-header: 100;
  --z-menu: 150;
  --z-float: 160;
  --z-panel: 200;

  color-scheme: light;
}

@media (max-width: 760px) {
  :root { --header-h: 70px; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-med: 1ms;
    --dur-slow: 1ms;
  }
}