/* ============================================================
   OII4 DESIGN TOKENS
   Civic / Institutional / High-End System
============================================================ */

:root {
  /* Core palette */
  --oii-ink: #06111f;
  --oii-navy: #0b1f35;
  --oii-blue: #123657;
  --oii-slate: #2f4054;

  --oii-ivory: #fbf7ef;
  --oii-paper: #ffffff;
  --oii-soft: #f6f8fb;

  --oii-copper: #b9784f;
  --oii-gold: #d4a662;
  --oii-amber: #ed9c66;

  /* Text */
  --text-primary: #0b1f35;
  --text-secondary: rgba(11, 31, 53, 0.72);
  --text-muted: rgba(11, 31, 53, 0.54);
  --text-inverse: #ffffff;
  --text-inverse-soft: rgba(255, 255, 255, 0.76);

  /* Surfaces */
  --surface: #ffffff;
  --surface-soft: #f6f8fb;
  --surface-dark: #06111f;
  --surface-blue: #0b1f35;

  /* Borders */
  --border-soft: rgba(11, 31, 53, 0.08);
  --border-light: rgba(255, 255, 255, 0.14);

  /* Shadows */
  --shadow-sm: 0 12px 28px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 22px 55px rgba(15, 23, 42, 0.09);
  --shadow-lg: 0 34px 90px rgba(15, 23, 42, 0.14);
  --shadow-dark: 0 34px 90px rgba(0, 0, 0, 0.28);

  /* Radius */
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 32px;
  --radius-xl: 42px;
  --radius-pill: 999px;

  /* Layout */
  --container: 1280px;
  --container-wide: 1480px;
  --page-gutter: clamp(1rem, 4vw, 3rem);

  /* Type */
  --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: "Sora", "Inter", system-ui, sans-serif;

  /* Motion */
  --ease-soft: cubic-bezier(.16, 1, .3, 1);
  --ease-standard: cubic-bezier(.2, .8, .2, 1);
  --transition-fast: 180ms var(--ease-standard);
  --transition-med: 320ms var(--ease-soft);
  --transition-slow: 800ms var(--ease-soft);

  /* Blur / Glass */
  --glass-bg: rgba(255,255,255,0.08);
  --glass-border: rgba(255,255,255,0.12);
  --glass-blur: blur(18px);

  /* Gradients */
  --gradient-dark:
    linear-gradient(
      135deg,
      #06111f 0%,
      #0b1f35 52%,
      #123657 100%
    );

  --gradient-gold:
    linear-gradient(
      135deg,
      rgba(212,166,98,0.18),
      rgba(237,156,102,0.12)
    );

  --gradient-soft:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f6f8fb 100%
    );

  /* Layering */
  --z-header: 1000;
  --z-overlay: 1100;
  --z-modal: 1200;

  /* Section spacing */
  --section-space: clamp(5rem, 9vw, 8rem);

  /* Typography scale */
  --display-xl: clamp(4rem, 8vw, 8rem);
  --display-lg: clamp(3rem, 6vw, 6rem);
  --display-md: clamp(2.2rem, 4vw, 4.5rem);

  /* Max widths */
  --content-narrow: 760px;
  --content-wide: 1200px;
}