/* ============================================================================
   PADEV Zenith — semantic token foundation
   ----------------------------------------------------------------------------
   Every raw colour in this product lives in this file. All other stylesheets
   consume semantic roles only (enforced by `npm run check`).

   Values are extracted from the owner reference boards, not invented:
   - Night palette / gradient stops / neutrals ....... dark board 10 + dark 01
   - Day palette / shadow ladder / materials ......... light board 01 + 03
   - Grid, container, section rhythm, glass blur ..... dark board 05
   - Type scale, spacing rhythm, radius ladder ....... dark board 10
   - Responsive type scaling and breakpoints ......... dark board 09 + light 08
   - Motion durations, easings, stagger, glow ........ dark board 06 + light 06
   ========================================================================== */

:root {
  /* --- Brand spectrum (dark board 01 · dark board 10 gradient system) ------ */
  --zenith-blue-deep: #0a1bff;
  --zenith-blue: #0066ff;
  --zenith-blue-day: #2563eb;
  --zenith-cyan: #00e5ff;
  --zenith-cyan-day: #00d8ff;
  --zenith-indigo: #7b5cff;
  --zenith-violet: #7c5cff;
  --zenith-violet-soft: #ede7ff;
  --zenith-magenta: #ff4dff;
  --zenith-pink: #ff4d9b;
  --zenith-orange: #ff7a00;
  --zenith-orange-warm: #ff8a00;
  --zenith-yellow: #ffd600;
  --zenith-amber: #ffc107;

  /* --- Neutrals (dark board 10 neutrals · light board 01 neutrals) -------- */
  --zenith-night-000: #02060f;
  --zenith-night-050: #050b18;
  --zenith-night-100: #0a0f1c;
  --zenith-night-200: #0f1424;
  --zenith-night-300: #151c2e;
  --zenith-night-400: #1e2540;
  --zenith-night-500: #2a324d;
  --zenith-night-600: #8c93a6;
  --zenith-ink-slate: #0f172a;
  --zenith-graphite: #334155;
  --zenith-cool-gray: #64748b;
  --zenith-mist-gray: #cbd5e1;
  --zenith-cloud-white: #f7f8fb;
  --zenith-day-canvas: #fafbfd;
  --zenith-white: #ffffff;

  /* Opaque stop used by CSS masks (never painted, only masked against). */
  --mask-opaque: #000000;

  /* --- Semantic hues (dark board 10 · semantic row) ----------------------- */
  --zenith-success: #00d0b4;
  --zenith-error: #ff4767;
  --zenith-warning: #ffb000;
  --zenith-info: #00b2ff;
  --zenith-accent: #895cf6;
  --zenith-success-day: #0f9d76;
  --zenith-error-day: #e11d48;
  --zenith-warning-day: #b45309;
  --zenith-info-day: #0284c7;

  /* --- Typography (dark board 10 · light board 01) ------------------------ */
  --font-display: "Space Grotesk", "Satoshi", "Avenir Next", "Segoe UI", sans-serif;
  --font-body: "DM Sans", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "SFMono-Regular", ui-monospace, Consolas, "Liberation Mono", monospace;

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

  /* Type scale — board 10 "TYPE SCALE" table (size / line / tracking).       */
  --text-display-1: clamp(2.5rem, 1.6rem + 3.6vw, 4rem);   /* 40 → 64 / 1.125 */
  --text-display-2: clamp(2rem, 1.45rem + 2.2vw, 3rem);    /* 32 → 48 / 1.167 */
  --text-h1: clamp(1.75rem, 1.35rem + 1.6vw, 2.25rem);     /* 28 → 36 / 1.222 */
  --text-h2: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);    /* 22 → 28 / 1.286 */
  --text-h3: clamp(1.125rem, 1.02rem + 0.42vw, 1.375rem);  /* 18 → 22 / 1.273 */
  --text-body-lg: 1rem;                                    /* 16 / 24         */
  --text-body: 0.875rem;                                   /* 14 / 20         */
  --text-sm: 0.8125rem;
  --text-xs: 0.75rem;                                      /* 12 / 16         */
  --text-micro: 0.6875rem;

  --leading-display: 1.12;
  --leading-heading: 1.24;
  --leading-body: 1.6;
  --leading-tight: 1.35;

  --tracking-display: -0.02em;   /* Display 1: -2%  */
  --tracking-display-2: -0.01em; /* Display 2: -1%  */
  --tracking-heading: 0em;       /* H1 / H2:  0%    */
  --tracking-h3: 0.01em;         /* H3:      +1%    */
  --tracking-body: 0.02em;       /* Body:    +2%    */
  --tracking-small: 0.03em;      /* Small:   +3%    */
  --tracking-eyebrow: 0.16em;
  --tracking-wordmark: 0.34em;

  /* --- Spacing — 8pt rhythm (board 10 "SPACING RHYTHM") ------------------- */
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-48: 3rem;
  --space-64: 4rem;
  --space-96: 6rem;
  --space-128: 8rem;

  /* --- Layout (dark board 05 "GRID & SPACING") ---------------------------- */
  --container-max: 82.5rem;                                /* 1320px          */
  --container-pad: clamp(1rem, 3.2vw, 2rem);
  --gutter: 1.5rem;                                        /* 24px            */
  --section-pad: clamp(3.5rem, 8vw, 7.5rem);               /* 56 → 120px      */
  --board-gap: 1.25rem;

  /* --- Radius ladder (board 10 "BORDER RADIUS LOGIC") --------------------- */
  --radius-tight: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --border-hairline: 1px;

  /* --- Motion (dark board 06 "GLOBAL MOTION TOKENS" + light board 06) ----- */
  --ease-default: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55);
  --ease-inout: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-linear: linear;

  --duration-xs: 150ms;
  --duration-s: 300ms;
  --duration-m: 600ms;
  --duration-l: 1000ms;
  --duration-xl: 1600ms;
  --duration-hover: 180ms;   /* light board 06 · hover        */
  --duration-card: 220ms;    /* light board 06 · card hover   */
  --duration-cursor: 120ms;  /* light board 06 · mouse glow   */
  --duration-page: 700ms;    /* light board 06 · transition   */

  --stagger-step: 80ms;      /* board 06 · stagger base       */
  --loop-aurora: 12s;        /* board 06 · aurora seamless    */
  --loop-gradient: 4s;       /* board 06 · gradient flow      */
  --loop-float: 2.8s;        /* light board 06 · floating     */
  --loop-sweep: 3.2s;        /* light board 06 · reflection   */
  --loop-marquee: 32s;
  --parallax-depth: 0.4;     /* board 06 · parallax 0.2 – 1.0 */
  --cursor-size: 24px;       /* board 06 · cursor size        */
  --glow-intensity: 0.6;     /* board 06 · glow intensity 60% */
  --lift-distance: 6px;
  --float-distance: 10px;

  /* --- Layering ----------------------------------------------------------- */
  --z-canvas: 0;
  --z-decor: 1;
  --z-content: 10;
  --z-sticky: 1020;
  --z-overlay: 1050;
  --z-cursor: 1090;
}

/* ==========================================================================
   ZENITH NIGHT — deep cinematic glass, luminous rims, aurora bloom
   Primary sources: dark board 03 (Kitchen Sink), dark board 10 (Design Language)
   ========================================================================== */
:root,
[data-theme="night"] {
  color-scheme: dark;

  --color-canvas: var(--zenith-night-000);
  --color-canvas-deep: #010409;
  --color-elevated: var(--zenith-night-100);
  --color-text: #f4f7ff;
  --color-text-soft: #c3ccdf;
  --color-text-muted: var(--zenith-night-600);
  --color-text-faint: #5a6478;
  --color-text-inverse: var(--zenith-ink-slate);
  --color-on-action: #ffffff;

  --color-primary: var(--zenith-blue);
  --color-primary-strong: #0f74ff;
  --color-primary-soft: rgb(0 102 255 / 0.16);
  --color-accent: var(--zenith-cyan);
  --color-accent-soft: rgb(0 229 255 / 0.14);
  --color-warm: var(--zenith-orange);
  --color-violet: var(--zenith-indigo);

  --color-success: var(--zenith-success);
  --color-error: var(--zenith-error);
  --color-warning: var(--zenith-warning);
  --color-info: var(--zenith-info);
  --color-success-bg: rgb(0 208 180 / 0.14);
  --color-error-bg: rgb(255 71 103 / 0.14);
  --color-warning-bg: rgb(255 176 0 / 0.14);
  --color-info-bg: rgb(0 178 255 / 0.14);

  /* Border language — board 05: "1px / 10% white", brightened by hierarchy. */
  --border-hair: rgb(255 255 255 / 0.06);
  --border-soft: rgb(255 255 255 / 0.10);
  --border-strong: rgb(255 255 255 / 0.18);
  --border-lumen: rgb(0 229 255 / 0.38);
  --border-lumen-warm: rgb(255 122 0 / 0.34);

  /* Glass materials — board 10 "GLASS MATERIALS" (low / medium / high / dark) */
  --glass-low: rgb(255 255 255 / 0.02);
  --glass-medium: rgb(12 20 38 / 0.55);
  --glass-high: rgb(16 26 48 / 0.72);
  --glass-dark: rgb(3 7 16 / 0.86);
  --glass-tinted: rgb(123 92 255 / 0.10);
  --glass-control: rgb(255 255 255 / 0.04);
  --glass-inset: rgb(255 255 255 / 0.07);
  --glass-blur: 20px;                       /* board 05 · Glass Blur 20px     */

  --surface-panel: linear-gradient(160deg, rgb(13 21 40 / 0.72), rgb(4 9 20 / 0.86));
  --surface-panel-flat: rgb(8 14 28 / 0.72);
  --surface-well: rgb(2 5 12 / 0.62);
  --surface-disabled: rgb(140 147 166 / 0.10);
  --surface-scrim: rgb(1 4 9 / 0.72);
  --surface-code: rgb(0 8 20 / 0.7);

  /* Shadow language — board 10 (soft glow / elevated / deep glow / cinematic) */
  --shadow-soft: 0 0 32px rgb(0 102 255 / 0.16);
  --shadow-elevated: 0 18px 48px rgb(0 0 0 / 0.55);
  --shadow-deep: 0 0 56px rgb(123 92 255 / 0.28);
  --shadow-cinematic: 0 24px 80px rgb(0 0 0 / 0.7), 0 0 48px rgb(255 122 0 / 0.10);
  --shadow-inset: inset 0 1px 0 rgb(255 255 255 / 0.07);
  --shadow-focus: 0 0 0 3px rgb(0 229 255 / 0.28);
  --shadow-action: 0 8px 24px rgb(0 102 255 / 0.34);
  --shadow-action-hover: 0 12px 34px rgb(0 102 255 / 0.46);
  --text-shadow-on-gradient: 0 1px 2px rgb(4 8 24 / 0.38);
  --shadow-gradient:
    0 10px 30px rgb(10 27 255 / 0.5),
    0 6px 22px rgb(255 84 16 / 0.3);
  --shadow-gradient-hover:
    0 16px 42px rgb(10 27 255 / 0.62),
    0 10px 30px rgb(255 84 16 / 0.42),
    0 0 26px rgb(0 229 255 / 0.22);

  /* Aurora and atmosphere — board 10 lighting principles */
  --aurora-alpha: 0.5;
  --aurora-saturation: 132%;
  --atmosphere:
    radial-gradient(58rem 34rem at 78% -6%, rgb(0 102 255 / 0.22), transparent 62%),
    radial-gradient(46rem 30rem at 6% 12%, rgb(123 92 255 / 0.16), transparent 60%),
    radial-gradient(52rem 36rem at 96% 58%, rgb(255 122 0 / 0.10), transparent 58%),
    radial-gradient(40rem 28rem at 22% 96%, rgb(0 229 255 / 0.10), transparent 60%);
  --grid-line: rgb(255 255 255 / 0.022);
  --grid-size: 64px;
  --starfield: rgb(255 255 255 / 0.5);
  --pointer-glow: rgb(0 229 255 / 0.16);
  --sweep-light: rgb(255 255 255 / 0.16);
  --selection-bg: rgb(0 229 255 / 0.3);
  --selection-text: #ffffff;
  --skeleton-base: rgb(255 255 255 / 0.05);
  --skeleton-sheen: rgb(255 255 255 / 0.10);
  --swatch-ring: rgb(255 255 255 / 0.12);
  --switch-thumb: #f4f7ff;

  --avatar-1: #1e2540;
  --avatar-2: #2a324d;
  --avatar-3: #1a2b4d;
  --chart-grid: rgb(255 255 255 / 0.06);
}

/* ==========================================================================
   ZENITH DAY — bright frosted glass, pastel aurora, editorial ambient shadow
   Primary source: light board 03 (Kitchen Sink), light board 01 (materials)
   Day is not an inversion of Night: material, shadow and hue families differ.
   ========================================================================== */
[data-theme="day"] {
  color-scheme: light;

  --color-canvas: var(--zenith-day-canvas);
  --color-canvas-deep: #f2f4f8;
  --color-elevated: var(--zenith-white);
  --color-text: var(--zenith-ink-slate);
  --color-text-soft: var(--zenith-graphite);
  --color-text-muted: var(--zenith-cool-gray);
  --color-text-faint: #94a3b8;
  --color-text-inverse: var(--zenith-white);
  --color-on-action: #ffffff;

  --color-primary: var(--zenith-blue-day);
  --color-primary-strong: #1d4ed8;
  --color-primary-soft: rgb(37 99 235 / 0.10);
  --color-accent: var(--zenith-cyan-day);
  --color-accent-soft: rgb(0 216 255 / 0.14);
  --color-warm: var(--zenith-orange-warm);
  --color-violet: var(--zenith-violet);

  --color-success: var(--zenith-success-day);
  --color-error: var(--zenith-error-day);
  --color-warning: var(--zenith-warning-day);
  --color-info: var(--zenith-info-day);
  --color-success-bg: rgb(15 157 118 / 0.12);
  --color-error-bg: rgb(225 29 72 / 0.10);
  --color-warning-bg: rgb(180 83 9 / 0.12);
  --color-info-bg: rgb(2 132 199 / 0.10);

  --border-hair: rgb(15 23 42 / 0.06);
  --border-soft: rgb(15 23 42 / 0.09);
  --border-strong: rgb(15 23 42 / 0.16);
  --border-lumen: rgb(37 99 235 / 0.42);
  --border-lumen-warm: rgb(255 138 0 / 0.36);

  /* Materials — light board 01 (glass light / frosted / aurora / surface soft) */
  --glass-low: rgb(255 255 255 / 0.6);
  --glass-medium: rgb(255 255 255 / 0.74);
  --glass-high: rgb(255 255 255 / 0.9);
  --glass-dark: rgb(247 248 251 / 0.94);
  --glass-tinted: rgb(124 92 255 / 0.07);
  --glass-control: rgb(255 255 255 / 0.86);
  --glass-inset: rgb(255 255 255 / 0.9);
  --glass-blur: 18px;

  --surface-panel: linear-gradient(165deg, rgb(255 255 255 / 0.96), rgb(250 251 253 / 0.92));
  --surface-panel-flat: rgb(255 255 255 / 0.96);
  --surface-well: rgb(241 244 249 / 0.8);
  --surface-disabled: rgb(100 116 139 / 0.08);
  --surface-scrim: rgb(226 232 240 / 0.72);
  --surface-code: rgb(241 245 249 / 0.9);

  /* Shadow ladder — light board 01 "SHADOW SYSTEM" XS · SM · MD · LG · XL */
  --shadow-soft: 0 4px 12px rgb(15 23 42 / 0.06);
  --shadow-elevated: 0 10px 24px rgb(15 23 42 / 0.08);
  --shadow-deep: 0 20px 40px rgb(15 23 42 / 0.10);
  --shadow-cinematic: 0 40px 80px rgb(15 23 42 / 0.12);
  --shadow-inset: inset 0 1px 0 rgb(255 255 255 / 0.9);
  --shadow-focus: 0 0 0 3px rgb(37 99 235 / 0.20);
  --shadow-action: 0 8px 20px rgb(37 99 235 / 0.24);
  --shadow-action-hover: 0 12px 28px rgb(37 99 235 / 0.32);
  --text-shadow-on-gradient: 0 1px 2px rgb(4 8 24 / 0.3);
  --shadow-gradient:
    0 10px 26px rgb(26 63 224 / 0.34),
    0 6px 18px rgb(255 95 20 / 0.22);
  --shadow-gradient-hover:
    0 16px 38px rgb(26 63 224 / 0.44),
    0 10px 26px rgb(255 95 20 / 0.3);

  --aurora-alpha: 0.34;
  --aurora-saturation: 108%;
  --atmosphere:
    radial-gradient(56rem 32rem at 82% -8%, rgb(0 216 255 / 0.18), transparent 62%),
    radial-gradient(44rem 28rem at 4% 8%, rgb(124 92 255 / 0.14), transparent 60%),
    radial-gradient(50rem 34rem at 98% 54%, rgb(255 138 0 / 0.10), transparent 58%),
    radial-gradient(38rem 26rem at 18% 98%, rgb(37 99 235 / 0.08), transparent 60%);
  --grid-line: rgb(15 23 42 / 0.028);
  --grid-size: 64px;
  --starfield: rgb(37 99 235 / 0.28);
  --pointer-glow: rgb(37 99 235 / 0.10);
  --sweep-light: rgb(255 255 255 / 0.85);
  --selection-bg: rgb(37 99 235 / 0.18);
  --selection-text: var(--zenith-ink-slate);
  --skeleton-base: rgb(15 23 42 / 0.06);
  --skeleton-sheen: rgb(255 255 255 / 0.75);
  --swatch-ring: rgb(15 23 42 / 0.08);
  --switch-thumb: #ffffff;

  --avatar-1: #dbe4f5;
  --avatar-2: #e6e0fb;
  --avatar-3: #ffe6cc;
  --chart-grid: rgb(15 23 42 / 0.07);
}

/* ==========================================================================
   Shared gradient system — board 10 "GRADIENT SYSTEM (AURORA)"
   Cyan #00E5FF → Blue #0066FF → Indigo #7B5CFF → Magenta #FF4DFF
   → Orange #FF7A00 → Yellow #FFD600
   ========================================================================== */
:root {
  --gradient-aurora: linear-gradient(
    90deg,
    var(--zenith-cyan) 0%,
    var(--zenith-blue) 20%,
    var(--zenith-indigo) 40%,
    var(--zenith-magenta) 60%,
    var(--zenith-orange) 80%,
    var(--zenith-yellow) 100%
  );
  --gradient-brand: linear-gradient(
    118deg,
    var(--zenith-cyan) 0%,
    var(--zenith-blue) 34%,
    var(--zenith-indigo) 62%,
    var(--zenith-orange) 100%
  );
  --gradient-action: linear-gradient(
    100deg,
    #0a1bff 0%,
    #1454ff 22%,
    #5b48f0 46%,
    #b6379c 64%,
    #ff5410 84%,
    #ff8a00 100%
  );
  --gradient-mark-cool: linear-gradient(
    145deg,
    var(--zenith-cyan) 0%,
    var(--zenith-blue) 52%,
    var(--zenith-blue-deep) 100%
  );
  --gradient-mark-warm: linear-gradient(
    150deg,
    var(--zenith-amber) 0%,
    var(--zenith-orange-warm) 48%,
    #f2650a 100%
  );

  /* The "Zenith" wordmark ramp: on every board the word runs blue → indigo →
     violet → magenta → orange across its own width, so the stops are tuned
     for a short string rather than reused from the full-width aurora bar. */
  --gradient-wordmark: linear-gradient(
    92deg,
    #2f7bff 0%,
    #5b6bff 20%,
    #8b5cf6 42%,
    #e34fc4 64%,
    #ff6a3d 86%,
    #ff8a00 100%
  );
  --gradient-rim: linear-gradient(
    120deg,
    rgb(0 229 255 / 0.85),
    rgb(123 92 255 / 0.45) 46%,
    rgb(255 122 0 / 0.8)
  );
  --gradient-sheen: linear-gradient(
    100deg,
    transparent 20%,
    var(--sweep-light) 50%,
    transparent 80%
  );
}

[data-theme="day"] {
  --gradient-brand: linear-gradient(
    118deg,
    var(--zenith-cyan-day) 0%,
    var(--zenith-blue-day) 34%,
    var(--zenith-violet) 62%,
    var(--zenith-orange-warm) 100%
  );
  --gradient-action: linear-gradient(
    100deg,
    #1a3fe0 0%,
    #2563eb 22%,
    #6d4ef0 46%,
    #c23f96 64%,
    #ff5f14 84%,
    #ff8a00 100%
  );
  --gradient-rim: linear-gradient(
    120deg,
    rgb(37 99 235 / 0.5),
    rgb(124 92 255 / 0.3) 46%,
    rgb(255 138 0 / 0.45)
  );
}

/* ==========================================================================
   Bootstrap 5.3 bridge — Bootstrap components inherit Zenith material roles
   so behaviour comes from the framework and appearance from the reference.
   ========================================================================== */
:root {
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size: var(--text-body-lg);
  --bs-body-line-height: var(--leading-body);
  --bs-body-color: var(--color-text);
  --bs-body-bg: var(--color-canvas);
  --bs-emphasis-color: var(--color-text);
  --bs-secondary-color: var(--color-text-muted);
  --bs-tertiary-color: var(--color-text-faint);
  --bs-border-color: var(--border-soft);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-radius-xl: var(--radius-xl);
  --bs-border-radius-pill: var(--radius-pill);
  --bs-link-color: var(--color-accent);
  --bs-link-hover-color: var(--color-primary-strong);
  --bs-primary: var(--color-primary);
  --bs-focus-ring-color: var(--color-accent-soft);
  --bs-gutter-x: var(--gutter);
  --bs-heading-color: var(--color-text);
  --bs-code-color: var(--color-accent);
  --bs-highlight-bg: var(--color-accent-soft);
  --bs-emphasis-color-rgb: 244, 247, 255;
}

[data-theme="day"] {
  --bs-emphasis-color-rgb: 15, 23, 42;
  --bs-link-color: var(--color-primary);
}