/* ==========================================================================
   GAMENI — Colors & Type
   A presence object. Not a product. Not a gadget. A way of saying I'm here.
   ========================================================================== */

/* ---------- Fonts — self-hosted via Fontsource ----------
   Display: Cormorant Garamond — elegant high-contrast serif with a soulful italic.
   Body:    Inter Tight — warm humanist sans, weights 300/400/500/600.
   Mono:    JetBrains Mono — captions and specs only.
   @font-face declarations are loaded from npm via src/pages/index.astro.
*/

:root {
  /* ------ Palette ------ */

  /* Ground — pure white / warm bone */
  --bone-00: #FFFFFF;          /* pure — lamp-on highlight, packaging */
  --bone-50: #FBF8F3;          /* warm bone — default surface */
  --bone-100: #F4EEE4;         /* soft bone — cards, elevated ground */
  --bone-200: #E8E0D2;         /* bone edge — dividers on light */

  /* Anchor — deep graphite / near black for type */
  --graphite-900: #12110F;     /* near-black, slightly warm */
  --graphite-800: #1E1C19;     /* body on light inverted */
  --graphite-700: #2A2824;     /* strong type */
  --graphite-500: #5A564F;     /* secondary type */
  --graphite-400: #807A70;     /* tertiary / meta */
  --graphite-300: #A8A197;     /* hairlines on dark */

  /* Warm accent — honey amber, matched to the lamp glow */
  --amber-900: #7A4A10;        /* deep ember */
  --amber-700: #B36E1F;        /* honey */
  --amber-500: #E8A24A;        /* glow — signature lamp color */
  --amber-300: #F5C98C;        /* glow halo */
  --amber-100: #FBEBD0;        /* candlelight wash */

  /* Iridescent — the visual thesis.
     Use as a GRADIENT, never as a flat swatch. */
  --irid-violet: #B7A6E8;
  --irid-lilac:  #D6C6F0;
  --irid-blush:  #F2D6E4;
  --irid-peach:  #F7DCC6;
  --irid-mint:   #C7E6D4;
  --irid-aqua:   #A8D8E3;
  --irid-sky:    #BCC8EC;

  --iridescent:
    linear-gradient(110deg,
      #B7A6E8 0%, #D6C6F0 18%, #F2D6E4 34%,
      #F7DCC6 50%, #C7E6D4 66%, #A8D8E3 82%, #BCC8EC 100%);

  --iridescent-soft:
    linear-gradient(110deg,
      rgba(183,166,232,0.55) 0%,
      rgba(242,214,228,0.55) 34%,
      rgba(247,220,198,0.55) 58%,
      rgba(168,216,227,0.55) 100%);

  /* ------ Semantic surfaces ------ */
  --surface-ground: var(--bone-50);
  --surface-raised: var(--bone-00);
  --surface-sunken: var(--bone-100);
  --surface-dark:   var(--graphite-900);

  /* ------ Semantic foreground ------ */
  --fg-1: var(--graphite-900);  /* primary type */
  --fg-2: var(--graphite-500);  /* secondary type */
  --fg-3: var(--graphite-400);  /* meta, captions */
  --fg-inverse: var(--bone-50); /* on dark */
  --fg-glow: var(--amber-500);  /* only for "on/connected" states */

  /* ------ Edges ------ */
  --edge-hair: rgba(18,17,15,0.08);
  --edge-soft: rgba(18,17,15,0.14);
  --edge-strong: rgba(18,17,15,0.28);

  /* ------ Shadows ------
     GAMENI is a quiet brand. Shadows are whisper-soft, never dramatic. */
  --shadow-rest: 0 1px 2px rgba(18,17,15,0.04), 0 1px 1px rgba(18,17,15,0.03);
  --shadow-lift: 0 8px 24px -12px rgba(18,17,15,0.12), 0 2px 6px rgba(18,17,15,0.04);
  --shadow-float: 0 24px 60px -24px rgba(18,17,15,0.18), 0 4px 12px rgba(18,17,15,0.05);
  --shadow-glow: 0 0 40px 4px rgba(232,162,74,0.35), 0 0 120px 20px rgba(232,162,74,0.18);

  /* ------ Type — families ------ */
  --font-display: 'Cormorant Garamond', 'GT Sectra Fine', Georgia, serif;
  --font-display-italic: 'Cormorant Garamond', 'GT Sectra Fine', Georgia, serif;
  --font-display-roman: 'Cormorant Garamond', 'GT Sectra Fine', Georgia, serif;
  --font-body:    'Inter Tight', 'Söhne', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ------ Type — scale ------
     Sparse, editorial. Built for whitespace and short sentences. */
  --fs-xs:   12px;   --lh-xs:   1.5;    --ls-xs:   0.04em;   /* caption, mono */
  --fs-sm:   14px;   --lh-sm:   1.55;   --ls-sm:   0.01em;   /* small body */
  --fs-base: 16px;   --lh-base: 1.65;   --ls-base: 0;        /* body */
  --fs-lg:   19px;   --lh-lg:   1.55;   --ls-lg:   0;        /* lead paragraph */
  --fs-xl:   28px;   --lh-xl:   1.25;   --ls-xl:  -0.01em;   /* pull-quote body */
  --fs-2xl:  44px;   --lh-2xl:  1.1;    --ls-2xl: -0.02em;   /* h3 / display sm */
  --fs-3xl:  64px;   --lh-3xl:  1.04;   --ls-3xl: -0.025em;  /* h2 */
  --fs-4xl:  96px;   --lh-4xl:  0.98;   --ls-4xl: -0.03em;   /* h1 / hero */
  --fs-5xl: 144px;   --lh-5xl:  0.94;   --ls-5xl: -0.035em;  /* stage headline */

  /* ------ Eyebrow / mark — all-caps label used sparingly ------ */
  --eyebrow-fs: 11px;
  --eyebrow-ls: 0.22em;

  /* ------ Radii ------
     The product is a sphere. Corners here are soft, never hard. */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  22px;
  --r-xl:  36px;
  --r-pill: 999px;
  --r-sphere: 50%;

  /* ------ Spacing — 4px base ------ */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 144px;

  /* ------ Motion ------
     Slow, living, optical. Never bouncy, never fast. */
  --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-breath:   cubic-bezier(0.42, 0.00, 0.23, 1.00);
  --dur-fast:      220ms;
  --dur-base:      460ms;
  --dur-slow:      900ms;
  --dur-breath:    6000ms;   /* iridescent shift, ambient */
}

/* ==========================================================================
   Semantic elements
   ========================================================================== */

html, body {
  background: var(--surface-ground);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1, .display-1 {
  font-family: var(--font-display-italic);
  font-weight: 400;
  font-size: var(--fs-4xl);
  line-height: var(--lh-4xl);
  letter-spacing: var(--ls-4xl);
  font-style: italic;
  color: var(--fg-1);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-display-italic);
  font-weight: 400;
  font-style: italic;
  font-size: var(--fs-3xl);
  line-height: var(--lh-3xl);
  letter-spacing: var(--ls-3xl);
  color: var(--fg-1);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-2xl);
  line-height: var(--lh-2xl);
  letter-spacing: var(--ls-2xl);
  color: var(--fg-1);
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-xl);
  line-height: var(--lh-xl);
  letter-spacing: var(--ls-xl);
  color: var(--fg-1);
}

p, .p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg-1);
  text-wrap: pretty;
  max-width: 62ch;
}

.lede {
  font-family: var(--font-display-italic);
  font-style: italic;
  font-size: var(--fs-xl);
  line-height: var(--lh-xl);
  color: var(--fg-2);
  max-width: 52ch;
}

.eyebrow, .kicker {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--eyebrow-fs);
  letter-spacing: var(--eyebrow-ls);
  text-transform: uppercase;
  color: var(--fg-2);
}

.caption, small {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  letter-spacing: var(--ls-xs);
  color: var(--fg-3);
}

.mono {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

a {
  color: var(--fg-1);
  text-decoration: underline;
  text-decoration-color: var(--edge-soft);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dur-fast) var(--ease-out-soft);
}
a:hover { text-decoration-color: var(--fg-1); }

hr {
  border: none;
  height: 1px;
  background: var(--edge-hair);
}

/* ==========================================================================
   Iridescent treatments — the visual thesis
   ========================================================================== */

.irid-fill {
  background: var(--iridescent);
  background-size: 220% 220%;
  animation: irid-shift var(--dur-breath) var(--ease-breath) infinite;
}

.irid-text {
  background: var(--iridescent);
  background-size: 220% 220%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: irid-shift var(--dur-breath) var(--ease-breath) infinite;
}

.irid-stroke {
  /* For SVG via `stroke="url(#irid)"` */
}

@keyframes irid-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes breath {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.015); }
}

@media (prefers-reduced-motion: reduce) {
  .irid-fill, .irid-text { animation: none; background-position: 30% 50%; }
}