/* Wizard brand tokens.
   Load this once on every page, then use var(--wizard-...) instead of hex codes.
   Theme: follows the visitor's system setting by default.
   Override with <html data-theme="light"> or <html data-theme="dark"> (e.g. from a settings switch).

   The one rule: orange (--wizard-magic) means Wizard. Use it only for AI actions and AI output. */

:root {
  /* Ramps: the raw palette. Prefer the role tokens below in product code. */
  --wizard-neutral-0: #FFFFFF;
  --wizard-neutral-50: #F4F5F7;
  --wizard-neutral-100: #E3E6EA;
  --wizard-neutral-200: #CDD2D9;
  --wizard-neutral-300: #B7BDC6;
  --wizard-neutral-400: #A3AAB4;
  --wizard-neutral-500: #7D848F;
  --wizard-neutral-600: #5B616B;
  --wizard-neutral-700: #3D424A;
  --wizard-neutral-800: #2A2E35;
  --wizard-neutral-850: #22262C;
  --wizard-neutral-900: #1A1D22;
  --wizard-neutral-950: #121417;
  --wizard-orange-50: #FEF4F1;
  --wizard-orange-100: #FFE7E0;
  --wizard-orange-200: #FECEC0;
  --wizard-orange-300: #FFAD94;
  --wizard-orange-400: #FE8560;
  --wizard-orange-500: #FF5B23;
  --wizard-orange-600: #D54102;
  --wizard-orange-700: #AC3403;
  --wizard-orange-800: #862601;
  --wizard-orange-900: #651B01;
  --wizard-orange-950: #481001;
  --wizard-green-50: #EDFBF0;
  --wizard-green-100: #D8F6DF;
  --wizard-green-200: #B3EBC1;
  --wizard-green-300: #84DB9D;
  --wizard-green-400: #50C879;
  --wizard-green-500: #1DB35F;
  --wizard-green-600: #00944B;
  --wizard-green-700: #02773B;
  --wizard-green-800: #005C2C;
  --wizard-green-900: #00441F;
  --wizard-green-950: #013014;
  --wizard-amber-50: #FEF6E8;
  --wizard-amber-100: #FDEACC;
  --wizard-amber-200: #F7D59D;
  --wizard-amber-300: #EEBB61;
  --wizard-amber-400: #DEA00C;
  --wizard-amber-500: #C38B09;
  --wizard-amber-600: #A17205;
  --wizard-amber-700: #825B02;
  --wizard-amber-800: #644602;
  --wizard-amber-900: #4A3302;
  --wizard-amber-950: #342301;
  --wizard-red-50: #FFF4F3;
  --wizard-red-100: #FFE6E5;
  --wizard-red-200: #FFCDCA;
  --wizard-red-300: #FFA8A4;
  --wizard-red-400: #FF7777;
  --wizard-red-500: #F72841;
  --wizard-red-600: #C8102E;
  --wizard-red-700: #A20121;
  --wizard-red-800: #800218;
  --wizard-red-900: #600210;
  --wizard-red-950: #460109;
  --wizard-blue-50: #F3F7FE;
  --wizard-blue-100: #E3EDFF;
  --wizard-blue-200: #C8DCFE;
  --wizard-blue-300: #A5C5FE;
  --wizard-blue-400: #7FACFE;
  --wizard-blue-500: #5A93FE;
  --wizard-blue-600: #3874E9;
  --wizard-blue-700: #295CC1;
  --wizard-blue-800: #1D4696;
  --wizard-blue-900: #153471;
  --wizard-blue-950: #0B2352;

  /* Typography */
  --wizard-font-display: "Instrument Sans", "Instrument Sans Fallback", "Helvetica Neue", Arial, sans-serif;
  --wizard-font-ui: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --wizard-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* Big sizes shrink smoothly on small screens */
  --wizard-type-display: clamp(44px, 6vw, 72px);
  --wizard-type-h1: clamp(34px, 4.5vw, 48px);
  --wizard-type-h2: clamp(26px, 3.2vw, 32px);
  --wizard-type-h3: 24px;

  /* Spacing: 4px base. Use these for every margin, padding and gap. */
  --wizard-space-1: 4px;
  --wizard-space-2: 8px;
  --wizard-space-3: 12px;
  --wizard-space-4: 16px;
  --wizard-space-5: 20px;
  --wizard-space-6: 24px;
  --wizard-space-8: 32px;
  --wizard-space-10: 40px;
  --wizard-space-12: 48px;
  --wizard-space-16: 64px;
  --wizard-space-20: 80px;
  --wizard-space-24: 96px;

  /* Corner radius. The logo is sharp; the interface is softly rounded. */
  --wizard-radius-sm: 6px;     /* checkboxes, small tags */
  --wizard-radius-md: 10px;    /* buttons, inputs, menu items */
  --wizard-radius-lg: 14px;    /* cards, alerts, table containers */
  --wizard-radius-xl: 20px;    /* panels, dialogs, large surfaces */
  --wizard-radius-full: 999px; /* badges, pills, toggles */

  /* Sizes */
  --wizard-control-height: 40px;        /* buttons and inputs on desktop */
  --wizard-control-height-touch: 44px;  /* minimum on touch screens */
  --wizard-row-height: 40px;            /* table rows, list items */
  --wizard-sidebar-width: 248px;
  --wizard-content-max: 1200px;

  /* UI motion (the spinner has its own timing below) */
  --wizard-duration-fast: 120ms;   /* hover, press */
  --wizard-duration-base: 200ms;   /* open, close, switch */
  --wizard-duration-slow: 320ms;   /* panels, dialogs */
  --wizard-ease-out: cubic-bezier(.2, .7, .2, 1);
  --wizard-ease-in-out: cubic-bezier(.65, 0, .35, 1);

  /* Motion */
  --wizard-spinner-duration: 1.8s;       /* loading: real waiting in the product */
  --wizard-spinner-duration-hero: 3.8s;  /* hero: showpiece on the website, splash and event screens */

  /* Roles: light theme (default) */
  --wizard-shadow-1: 0 1px 2px rgba(18, 20, 23, 0.06), 0 1px 1px rgba(18, 20, 23, 0.04);
  --wizard-shadow-2: 0 8px 24px rgba(18, 20, 23, 0.12), 0 2px 6px rgba(18, 20, 23, 0.08);
  --wizard-shadow-3: 0 24px 64px rgba(18, 20, 23, 0.18), 0 4px 12px rgba(18, 20, 23, 0.08);
  --wizard-bg: #FFFFFF;
  --wizard-surface: #F4F5F7;
  --wizard-surface-hover: #E3E6EA;
  --wizard-border: #E3E6EA;
  --wizard-border-strong: #CDD2D9;
  --wizard-text: #121417;
  --wizard-text-muted: #5B616B;
  --wizard-text-subtle: #7D848F;
  --wizard-focus: #121417;
  --wizard-magic: #FF5B23;
  --wizard-magic-hover: #FE8560;
  --wizard-magic-pressed: #ED4A03;
  --wizard-on-magic: #121417;
  --wizard-magic-tint: #FFF4F0;
  --wizard-magic-tint-strong: #FFE8E0;
  --wizard-magic-line: #FFB59C;
  --wizard-action: #121417;
  --wizard-action-hover: #3D424A;
  --wizard-on-action: #FFFFFF;
  --wizard-select: #E3E6EA;
  --wizard-link: #121417;
  --wizard-link-underline: #7D848F;
  --wizard-success-text: #02773B;
  --wizard-success-bg: #EDFBF0;
  --wizard-success-border: #B3EBC1;
  --wizard-success-solid: #00944B;
  --wizard-on-success: #121417;
  --wizard-warning-text: #644602;
  --wizard-warning-bg: #FEF6E8;
  --wizard-warning-border: #F7D59D;
  --wizard-warning-solid: #DEA00C;
  --wizard-on-warning: #121417;
  --wizard-danger-text: #A20121;
  --wizard-danger-bg: #FFF4F3;
  --wizard-danger-border: #FFCDCA;
  --wizard-danger-solid: #C8102E;
  --wizard-on-danger: #FFFFFF;
  --wizard-info-text: #295CC1;
  --wizard-info-bg: #F3F7FE;
  --wizard-info-border: #C8DCFE;
  --wizard-info-solid: #295CC1;
  --wizard-on-info: #FFFFFF;
  --wizard-danger-hover: #A20121;
  --wizard-chart-wizard: #FF5B23;
  --wizard-chart-base: #CDD2D9;
  --wizard-chart-1: #3874E9;
  --wizard-chart-2: #1ABCB8;
  --wizard-chart-3: #DEA00C;
  --wizard-chart-4: #8F68CB;
  --wizard-chart-5: #A3AAB4;
  --wizard-chart-6: #1DB35F;
  --wizard-line: #121417;
  --wizard-core: #FF5B23;
  --wizard-muted: #5B616B;
  --wizard-on-core: #121417;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wizard-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --wizard-shadow-2: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px #2A2E35;
    --wizard-shadow-3: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px #2A2E35;
    --wizard-bg: #121417;
    --wizard-surface: #1A1D22;
    --wizard-surface-hover: #22262C;
    --wizard-border: #2A2E35;
    --wizard-border-strong: #3D424A;
    --wizard-text: #F4F5F7;
    --wizard-text-muted: #A3AAB4;
    --wizard-text-subtle: #7D848F;
    --wizard-focus: #F4F5F7;
    --wizard-magic: #FF5B23;
    --wizard-magic-hover: #FE8560;
    --wizard-magic-pressed: #ED4A03;
    --wizard-on-magic: #121417;
    --wizard-magic-tint: #2A1B18;
    --wizard-magic-tint-strong: #3D2119;
    --wizard-magic-line: #7D341C;
    --wizard-action: #F4F5F7;
    --wizard-action-hover: #CDD2D9;
    --wizard-on-action: #121417;
    --wizard-select: #2A2E35;
    --wizard-link: #F4F5F7;
    --wizard-link-underline: #7D848F;
    --wizard-success-text: #84DB9D;
    --wizard-success-bg: #013014;
    --wizard-success-border: #005C2C;
    --wizard-success-solid: #1DB35F;
    --wizard-on-success: #121417;
    --wizard-warning-text: #EEBB61;
    --wizard-warning-bg: #342301;
    --wizard-warning-border: #644602;
    --wizard-warning-solid: #DEA00C;
    --wizard-on-warning: #121417;
    --wizard-danger-text: #FFA8A4;
    --wizard-danger-bg: #460109;
    --wizard-danger-border: #800218;
    --wizard-danger-solid: #C8102E;
    --wizard-on-danger: #FFFFFF;
    --wizard-info-text: #A5C5FE;
    --wizard-info-bg: #0B2352;
    --wizard-info-border: #1D4696;
    --wizard-info-solid: #5A93FE;
    --wizard-on-info: #121417;
    --wizard-danger-hover: #A20121;
    --wizard-chart-wizard: #FF5B23;
    --wizard-chart-base: #3D424A;
    --wizard-chart-1: #3874E9;
    --wizard-chart-2: #1ABCB8;
    --wizard-chart-3: #DEA00C;
    --wizard-chart-4: #8F68CB;
    --wizard-chart-5: #A3AAB4;
    --wizard-chart-6: #1DB35F;
    --wizard-line: #F4F5F7;
    --wizard-core: #FF5B23;
    --wizard-muted: #A3AAB4;
    --wizard-on-core: #121417;
  }
}

:root[data-theme="dark"] {
  --wizard-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --wizard-shadow-2: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px #2A2E35;
  --wizard-shadow-3: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px #2A2E35;
  --wizard-bg: #121417;
  --wizard-surface: #1A1D22;
  --wizard-surface-hover: #22262C;
  --wizard-border: #2A2E35;
  --wizard-border-strong: #3D424A;
  --wizard-text: #F4F5F7;
  --wizard-text-muted: #A3AAB4;
  --wizard-text-subtle: #7D848F;
  --wizard-focus: #F4F5F7;
  --wizard-magic: #FF5B23;
  --wizard-magic-hover: #FE8560;
  --wizard-magic-pressed: #ED4A03;
  --wizard-on-magic: #121417;
  --wizard-magic-tint: #2A1B18;
  --wizard-magic-tint-strong: #3D2119;
  --wizard-magic-line: #7D341C;
  --wizard-action: #F4F5F7;
  --wizard-action-hover: #CDD2D9;
  --wizard-on-action: #121417;
  --wizard-select: #2A2E35;
  --wizard-link: #F4F5F7;
  --wizard-link-underline: #7D848F;
  --wizard-success-text: #84DB9D;
  --wizard-success-bg: #013014;
  --wizard-success-border: #005C2C;
  --wizard-success-solid: #1DB35F;
  --wizard-on-success: #121417;
  --wizard-warning-text: #EEBB61;
  --wizard-warning-bg: #342301;
  --wizard-warning-border: #644602;
  --wizard-warning-solid: #DEA00C;
  --wizard-on-warning: #121417;
  --wizard-danger-text: #FFA8A4;
  --wizard-danger-bg: #460109;
  --wizard-danger-border: #800218;
  --wizard-danger-solid: #C8102E;
  --wizard-on-danger: #FFFFFF;
  --wizard-info-text: #A5C5FE;
  --wizard-info-bg: #0B2352;
  --wizard-info-border: #1D4696;
  --wizard-info-solid: #5A93FE;
  --wizard-on-info: #121417;
  --wizard-danger-hover: #A20121;
  --wizard-chart-wizard: #FF5B23;
  --wizard-chart-base: #3D424A;
  --wizard-chart-1: #3874E9;
  --wizard-chart-2: #1ABCB8;
  --wizard-chart-3: #DEA00C;
  --wizard-chart-4: #8F68CB;
  --wizard-chart-5: #A3AAB4;
  --wizard-chart-6: #1DB35F;
  --wizard-line: #F4F5F7;
  --wizard-core: #FF5B23;
  --wizard-muted: #A3AAB4;
  --wizard-on-core: #121417;
}