/* =============================================================================
   Aurora Noir · design tokens
   Every colour derives from one number, --hue, which Blazor sets from the time
   of day (or the user's choice). Because --hue is a registered custom property
   it transitions smoothly, so the whole palette drifts instead of jumping.
   ============================================================================= */

@layer reset, tokens, base, layout, components, utilities, themes, motion;

/* ---- Registered properties (top level: @property is not allowed inside @layer) */
@property --hue        { syntax: "<number>";     inherits: true;  initial-value: 172; }
@property --card-hue   { syntax: "<number>";     inherits: true;  initial-value: -1; }
@property --mx         { syntax: "<number>";     inherits: true;  initial-value: 0.5; }
@property --my         { syntax: "<number>";     inherits: true;  initial-value: 0.5; }
@property --lift       { syntax: "<number>";     inherits: true;  initial-value: 0; }
@property --tilt       { syntax: "<angle>";      inherits: true;  initial-value: 0deg; }
@property --glow       { syntax: "<number>";     inherits: true;  initial-value: 0; }
@property --px         { syntax: "<number>";     inherits: true;  initial-value: 0.5; }
@property --py         { syntax: "<number>";     inherits: true;  initial-value: 0.3; }
@property --t          { syntax: "<integer>";    inherits: true;  initial-value: 0; }
@property --mm         { syntax: "<integer>";    inherits: false; initial-value: 0; }
@property --ss         { syntax: "<integer>";    inherits: false; initial-value: 0; }
@property --spin       { syntax: "<angle>";      inherits: false; initial-value: 0deg; }
@property --a1x { syntax: "<percentage>"; inherits: false; initial-value: 18%; }
@property --a1y { syntax: "<percentage>"; inherits: false; initial-value: 22%; }
@property --a2x { syntax: "<percentage>"; inherits: false; initial-value: 82%; }
@property --a2y { syntax: "<percentage>"; inherits: false; initial-value: 18%; }
@property --a3x { syntax: "<percentage>"; inherits: false; initial-value: 70%; }
@property --a3y { syntax: "<percentage>"; inherits: false; initial-value: 85%; }
@property --a4x { syntax: "<percentage>"; inherits: false; initial-value: 22%; }
@property --a4y { syntax: "<percentage>"; inherits: false; initial-value: 78%; }

/* ---- Self-hosted fonts (Inter: OFL · Hub Mono = DejaVu Sans Mono subset: Bitstream Vera licence) */
@font-face { font-family: "Inter"; src: url("../fonts/inter-400.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-500.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-600.woff") format("woff"); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("../fonts/inter-display-600.woff") format("woff"); font-weight: 500 650; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("../fonts/inter-display-800.woff") format("woff"); font-weight: 700 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Hub Mono"; src: url("../fonts/hub-mono-400.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Hub Mono"; src: url("../fonts/hub-mono-700.woff") format("woff"); font-weight: 600 800; font-style: normal; font-display: swap; }

@layer tokens {
  :root,
  .app {
    color-scheme: dark;

    /* Blazor sets --clock-hue from the time of day; fixed-colour themes override --hue directly. */
    --hue: var(--clock-hue, 172);

    /* -- Hue family: the accent, a violet-ward partner and a warm counterpoint */
    --hue-2: calc(var(--hue) + 95);
    --hue-3: calc(var(--hue) - 45);

    /* -- Surfaces (near-black, faintly tinted toward the partner hue) */
    --bg:          oklch(12.5% 0.018 var(--hue-2));
    --bg-raise:    oklch(16% 0.022 var(--hue-2));
    --surface:     oklch(100% 0 0 / 0.055);
    --surface-2:   oklch(100% 0 0 / 0.085);
    --surface-hi:  oklch(100% 0 0 / 0.12);
    --scrim:       oklch(8% 0.02 var(--hue-2) / 0.72);

    /* -- Text (all ≥ 4.5:1 on --bg; --text-faint is for non-essential decoration only) */
    --text:        oklch(96% 0.008 var(--hue));
    --text-dim:    oklch(80% 0.018 var(--hue));
    --text-faint:  oklch(64% 0.02 var(--hue));

    /* -- Accents */
    --accent:      oklch(83% 0.14 var(--hue));
    --accent-2:    oklch(71% 0.17 var(--hue-2));
    --accent-3:    oklch(78% 0.13 var(--hue-3));
    --accent-ink:  oklch(17% 0.04 var(--hue));          /* text on accent fills */
    --accent-soft: color-mix(in oklch, var(--accent) 16%, transparent);
    --accent-line: color-mix(in oklch, var(--accent) 45%, transparent);

    /* -- Status */
    --success: oklch(80% 0.15 155);
    --warning: oklch(84% 0.14 80);
    --danger:  oklch(70% 0.19 22);

    /* -- Aurora layers */
    --aurora-1: oklch(62% 0.17 var(--hue) / 0.55);
    --aurora-2: oklch(52% 0.2 var(--hue-2) / 0.55);
    --aurora-3: oklch(62% 0.16 var(--hue-3) / 0.38);
    --aurora-4: oklch(46% 0.17 calc(var(--hue) + 170) / 0.4);
    --aurora-opacity: 0.9;
    --grain-opacity: 0.075;
    --particles-display: block;

    /* -- Glass */
    --blur: 18px;
    --glass-bg: linear-gradient(180deg, oklch(100% 0 0 / 0.075), oklch(100% 0 0 / 0.028));
    --glass-solid: oklch(18% 0.02 var(--hue-2) / 0.94);  /* fallback without backdrop-filter */
    --border:        oklch(100% 0 0 / 0.1);
    --border-strong: oklch(100% 0 0 / 0.18);
    --line:          oklch(100% 0 0 / 0.08);   /* hairlines between landing sections */
    --highlight:     inset 0 1px 0 oklch(100% 0 0 / 0.09), inset 0 0 0 1px oklch(100% 0 0 / 0.02);

    /* -- Shadows (layered: contact + ambient + tinted) */
    --shadow-1: 0 1px 2px oklch(0% 0 0 / 0.35), 0 4px 12px -4px oklch(0% 0 0 / 0.35);
    --shadow-2: 0 2px 4px oklch(0% 0 0 / 0.3), 0 12px 32px -8px oklch(0% 0 0 / 0.5), 0 24px 60px -24px color-mix(in oklch, var(--accent-2) 30%, transparent);
    --shadow-3: 0 4px 8px oklch(0% 0 0 / 0.3), 0 24px 60px -12px oklch(0% 0 0 / 0.6), 0 40px 100px -30px color-mix(in oklch, var(--accent) 35%, transparent);
    --glow-strength: 1;

    /* -- Shape */
    --radius-xs: 8px;
    --radius-s: 12px;
    --radius-m: 16px;
    --radius-l: 22px;
    --radius-xl: 30px;
    --radius-pill: 999px;

    /* -- Space (4px base) */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4.5rem;
    --s-9: 7rem;
    --gutter: clamp(1rem, 4vw, 2.5rem);
    --container: 1240px;

    /* -- Type */
    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: "Inter Display", "Inter", ui-sans-serif, system-ui, sans-serif;
    --font-mono: "Hub Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
    --fs-xs: 0.75rem;
    --fs-s: 0.875rem;
    --fs-m: 1rem;
    --fs-l: 1.175rem;
    --fs-h3: clamp(1.15rem, 1rem + 0.5vw, 1.35rem);
    --fs-h2: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
    --fs-display-l: clamp(2.4rem, 1.5rem + 4vw, 4.75rem);
    --fs-display-xl: clamp(3.4rem, 1rem + 10vw, 9.5rem);

    /* -- Motion */
    --dur-1: 120ms;
    --dur-2: 220ms;
    --dur-3: 420ms;
    --dur-4: 800ms;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --stagger-step: 70ms;

    /* -- Layers */
    --z-backdrop: 0;
    --z-content: 1;
    --z-sticky: 20;
    --z-overlay: 50;
    --z-toast: 80;
  }

  /* A smoother spring where linear() easing is supported. */
  @supports (transition-timing-function: linear(0, 1)) {
    :root,
    .app {
      --ease-spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1);
    }
  }
}