/* Eldral design tokens. Hex values are the source palette (exact parity with
   the previous build); the @supports block re-expresses them in OKLCH so
   color-mix() and glow ramps interpolate perceptually. */

@property --card-glow-x {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 50%;
}
@property --card-glow-y {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 50%;
}
@property --card-glow-a {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}
@property --bloom-power {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
@property --nav-ind-x {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}
@property --nav-ind-w {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}

@layer tokens {
  :root {
    --gold: #D4A026;
    --gold-light: #F5C542;
    --red: #9B2525;
    --red-light: #C83030;
    --emerald: #1B7B4A;
    --emerald-light: #28A868;
    --blue: #2255AA;
    --blue-light: #3378DD;
    --teal: #2BA595;
    --purple: #7B45B5;
    --orange: #CC7722;
    --text: #E8E0D4;
    --text-dim: #8A8078;
    --black: #000000;
    --hero-amber: #D4922E;
    --motto-bronze: #A07840;
    --bloom-base: #8C3A08;

    /* Derived surfaces (used everywhere a hardcoded rgba() used to live) */
    --nav-bg: rgba(0, 0, 0, 0.85);
    --hairline-gold: rgba(212, 160, 38, 0.08);
    --border-gold-dim: rgba(212, 160, 38, 0.12);
    --border-gold-mid: rgba(212, 160, 38, 0.3);
    --border-gold-strong: rgba(212, 160, 38, 0.4);
    --wash-gold: rgba(212, 160, 38, 0.06);
    --hairline-white: rgba(255, 255, 255, 0.06);
    --hairline-white-mid: rgba(255, 255, 255, 0.12);

    /* Motion */
    --ease-soft: cubic-bezier(0.22, 0.8, 0.3, 1);
    --dur-quick: 0.3s;
    --dur-reveal: 0.9s;
  }

  @supports (color: oklch(50% 0.1 100)) {
    :root {
      --gold: oklch(73.6% 0.141 83.1);
      --gold-light: oklch(84.4% 0.1513 87.9);
      --red: oklch(45.7% 0.1544 25.8);
      --red-light: oklch(54.9% 0.1888 26);
      --emerald: oklch(51.7% 0.1159 155.5);
      --emerald-light: oklch(64.9% 0.1446 155.9);
      --blue: oklch(46.5% 0.1472 260.1);
      --blue-light: oklch(58.3% 0.1692 258.3);
      --teal: oklch(65.3% 0.1063 182.1);
      --purple: oklch(51% 0.1719 303);
      --orange: oklch(65% 0.1404 59.6);
      --text: oklch(91% 0.0183 78.2);
      --text-dim: oklch(60.6% 0.0171 61.2);
      --hero-amber: oklch(70.9% 0.1353 72.7);
      --motto-bronze: oklch(60% 0.0887 74);
      --bloom-base: oklch(45.4% 0.1245 45.2);

      --nav-bg: color-mix(in oklch, var(--black) 85%, transparent);
      --hairline-gold: color-mix(in oklch, var(--gold) 8%, transparent);
      --border-gold-dim: color-mix(in oklch, var(--gold) 12%, transparent);
      --border-gold-mid: color-mix(in oklch, var(--gold) 30%, transparent);
      --border-gold-strong: color-mix(in oklch, var(--gold) 40%, transparent);
      --wash-gold: color-mix(in oklch, var(--gold) 6%, transparent);
      --hairline-white: color-mix(in oklch, white 6%, transparent);
      --hairline-white-mid: color-mix(in oklch, white 12%, transparent);
    }
  }

  /* linear() spring where supported, declared after the cubic-bezier token
     so unsupporting engines keep the valid earlier value. */
  @supports (transition-timing-function: linear(0, 1)) {
    :root {
      --ease-soft: linear(
        0, 0.0037 0.63%, 0.0961 3.68%, 0.4426 9.42%, 0.5824 12.11%,
        0.6942 14.83%, 0.7846 17.63%, 0.8567 20.56%, 0.9126 23.66%,
        0.9544 27.03%, 0.9838 30.85%, 1.0025 35.44%, 1.0117 41.65%,
        1.0116 52.4%, 1.0025 76.63%, 1
      );
    }
  }
}