/* ============================================================
   Celestine — Design Tokens
   Dark celestial: deep cosmos base, luminous gold accent,
   moonlight-silver jewel glow, moonlight off-white text.
   Fonts are self-hosted (woff2 in /assets/fonts) — no external
   font CDN is referenced anywhere.
   ============================================================ */

/* ---- Cormorant Garamond (display serif) — one variable file per subset ---- */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Mulish (humanist body sans) — variable font ---- */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fonts/mulish-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fonts/mulish-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fonts/mulish-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fonts/mulish-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Pinyon Script (script accent — logo + one tagline only) ---- */
@font-face {
  font-family: 'Pinyon Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/pinyon-script-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Pinyon Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/pinyon-script-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body:    'Mulish', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-script:  'Pinyon Script', 'Cormorant Garamond', cursive;

  --text-xs:    0.8125rem;  /* 13px */
  --text-sm:    0.9375rem;  /* 15px */
  --text-base:  1.0625rem;  /* 17px — body baseline */
  --text-lg:    1.25rem;    /* 20px */
  --text-xl:    1.5rem;     /* 24px */
  --text-2xl:   1.875rem;   /* 30px */
  --text-3xl:   2.5rem;     /* 40px */
  --text-4xl:   3.375rem;   /* 54px */
  --text-5xl:   4.5rem;     /* 72px */
  --text-6xl:   clamp(2.75rem, 8vw, 5.75rem); /* hero display ceiling ~92px */

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.12;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  --tracking-tight:  -0.015em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-label:  0.22em;

  /* ============================================================
     COLOR — Cosmic base
     ============================================================ */
  --cosmos-950: #080A1E;
  --cosmos-900: #0A0D24;
  --cosmos-800: #0E1230;   /* cosmic indigo — primary background */
  --cosmos-700: #11132E;   /* midnight navy — alt background */
  --cosmos-600: #161A3D;   /* raised surface */
  --cosmos-500: #1E2350;

  /* Depth / aubergine */
  --violet-900: #190F33;
  --violet-800: #241640;
  --violet-700: #2E1C52;
  --violet-600: #3A2566;

  /* Gold — primary luminous accent */
  --gold-100: #F6ECCB;
  --gold-200: #EFD99E;
  --gold-300: #E8C97A;
  --gold-500: #D9B45B;   /* PRIMARY accent */
  --gold-600: #C49B45;
  --gold-700: #A87F33;

  /* Jewel accents */
  --silver-200: #E4E9F4;
  --silver-400: #C9D2E3;
  --silver-600: #97A2BE;
  --amethyst-400: #B69BE3;
  --amethyst-500: #9B7BD4;

  /* Moonlight text scale */
  --moon-100: #F4F2FB;
  --moon-200: #EDEBF5;   /* body text */
  --moon-300: #D4D5E6;
  --moon-400: #BFC0D8;
  --moon-500: #9395B4;
  --moon-600: #6C6E8E;

  /* Functional */
  --success: #7FBE9B;
  --warning: #E0B36A;
  --danger:  #D98A8A;

  /* Hairlines */
  --line-gold:        rgba(217, 180, 91, 0.28);
  --line-gold-strong: rgba(217, 180, 91, 0.5);
  --line-moon:        rgba(237, 235, 245, 0.12);
  --line-moon-soft:   rgba(237, 235, 245, 0.07);

  /* ---- Semantic aliases ---- */
  --surface-page:    var(--cosmos-800);
  --surface-alt:     var(--cosmos-700);
  --surface-raised:  var(--cosmos-600);
  --surface-sunken:  var(--cosmos-900);
  --surface-card:    rgba(22, 26, 61, 0.55);
  --surface-input:   rgba(8, 10, 30, 0.6);
  --surface-overlay: rgba(8, 10, 30, 0.78);

  --text-heading: var(--gold-300);
  --text-body:    var(--moon-200);
  --text-muted:   var(--moon-400);
  --text-faint:   var(--moon-500);
  --text-on-gold: var(--cosmos-900);

  --accent:       var(--gold-500);
  --accent-hover: var(--gold-300);
  --accent-press: var(--gold-700);
  --jewel:        var(--silver-400);

  --border-hairline: var(--line-gold);
  --border-soft:     var(--line-moon);
  --focus-ring:      var(--gold-500);

  --link:           var(--gold-300);
  --link-underline: var(--line-gold-strong);

  /* ============================================================
     SPACING & LAYOUT (4px base)
     ============================================================ */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --container:        1200px;
  --container-wide:   1400px;
  --container-text:   720px;
  --gutter:           clamp(1.25rem, 5vw, 3.5rem);
  --section-y:        clamp(3.5rem, 9vw, 6.875rem);

  /* ============================================================
     RADII
     ============================================================ */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* ============================================================
     SHADOWS & GLOWS
     ============================================================ */
  --shadow-sm: 0 1px 2px rgba(4, 6, 20, 0.5);
  --shadow-md: 0 8px 24px rgba(4, 6, 20, 0.45);
  --shadow-lg: 0 20px 50px rgba(4, 6, 20, 0.55);
  --shadow-xl: 0 32px 80px rgba(4, 6, 20, 0.6);

  --glow-gold:        0 0 28px rgba(217, 180, 91, 0.28);
  --glow-gold-strong: 0 0 44px rgba(217, 180, 91, 0.45);
  --glow-silver:      0 0 32px rgba(201, 210, 227, 0.30);
  --glow-amethyst:    0 0 36px rgba(155, 123, 212, 0.30);

  --edge-gold: inset 0 0 0 1px rgba(217, 180, 91, 0.22);
  --edge-moon: inset 0 0 0 1px rgba(237, 235, 245, 0.08);

  /* ============================================================
     GRADIENTS & TEXTURE
     ============================================================ */
  --gradient-cosmos:    linear-gradient(180deg, #0E1230 0%, #190F33 60%, #241640 100%);
  --gradient-night:     linear-gradient(160deg, #11132E 0%, #0A0D24 100%);
  --gradient-aura:      radial-gradient(60% 60% at 50% 35%, rgba(46, 28, 82, 0.65) 0%, rgba(14, 18, 48, 0) 70%);
  --gradient-gold:      linear-gradient(120deg, #E8C97A 0%, #D9B45B 45%, #A87F33 100%);
  --gradient-gold-soft: linear-gradient(120deg, #F6ECCB 0%, #D9B45B 100%);
  --gradient-moon-veil: radial-gradient(80% 50% at 50% 0%, rgba(201, 210, 227, 0.12) 0%, rgba(201, 210, 227, 0) 70%);

  --starfield:
    radial-gradient(1px 1px at 20% 30%, rgba(237,235,245,0.9), transparent),
    radial-gradient(1px 1px at 70% 20%, rgba(201,210,227,0.7), transparent),
    radial-gradient(1px 1px at 40% 70%, rgba(237,235,245,0.6), transparent),
    radial-gradient(1.5px 1.5px at 85% 55%, rgba(217,180,91,0.55), transparent),
    radial-gradient(1px 1px at 55% 45%, rgba(237,235,245,0.5), transparent),
    radial-gradient(1px 1px at 12% 80%, rgba(201,210,227,0.6), transparent),
    radial-gradient(1.5px 1.5px at 90% 85%, rgba(237,235,245,0.5), transparent);

  --rule-gold: linear-gradient(90deg, transparent, rgba(217,180,91,0.5), transparent);
  --rule-moon: linear-gradient(90deg, transparent, rgba(237,235,245,0.18), transparent);

  --blur-chrome: saturate(140%) blur(14px);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-celestial: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --dur-veil: 800ms;
}