/*
  SKD Krypto design tokens.
  Source: Figma file xdc82fp188ssSV45Y7LKhz, node 726:2224.
  Refreshed from local Figma variables on 2026-08-06.
*/

/* Self-hosted webfonts (Family-Namen = --font-family-* Tokens). Muss vor :root stehen. */
@import "../fonts/fonts.css";

:root {
  --color-neutral-0: #FFFFFF;
  --color-neutral-100: #EEF0F3;
  --color-neutral-300: #C7CBD3;
  --color-neutral-400: #A4A9B4;
  --color-neutral-500: #7D8290;
  --color-neutral-600: #5B606D;
  --color-neutral-700: #41454F;
  --color-neutral-800: #292C33;
  --color-neutral-850: #1A1C23;
  --color-neutral-875: #0B0B0F;
  --color-neutral-900: #000000;

  --color-primary-50: #FFF4E6;
  --color-primary-100: #FFE2C2;
  --color-primary-200: #FFC98D;
  --color-primary-300: #FCAD59;
  --color-primary-400: #F79530;
  --color-primary-500: #F28714;
  --color-primary-600: #ED8003;
  --color-primary-700: #5E3001;
  --color-primary-800: #1F1000;
  --color-primary-900: #0F0800;

  --color-secondary-50: #E9EEFF;
  --color-secondary-100: #C9D6FF;
  --color-secondary-200: #A3B8FF;
  --color-secondary-300: #7796FF;
  --color-secondary-400: #4B72FF;
  --color-secondary-500: #264EFF;
  --color-secondary-600: #0040FF;
  --color-secondary-700: #0034CC;
  --color-secondary-800: #002999;
  --color-secondary-900: #0A132E;

  --color-success-strong: #16A34A;
  --color-success-bg: #ECFDF3;
  --color-success-bg-dark: #0A2015;
  --color-success-dark: #15803D;

  --color-warning-strong: #D97706;
  --color-warning-bg: #FFF7E6;
  --color-warning-bg-dark: #2B1D05;
  --color-warning-dark: #B45309;

  --color-error-strong: #DC2626;
  --color-error-light: #FF6B6B;
  --color-error-bg: #FEF2F2;
  --color-error-bg-dark: #2A0E0E;
  --color-error-dark: #B91C1C;

  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* No rounded corners at any level — all radii pinned to 0, no exceptions. */
  --radius-none: 0px;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-full: 0px;

  --size-control-sm: 36px;
  --size-control-md: 44px;
  --size-control-lg: 52px;
  --size-icon-sm: 16px;
  --size-icon-md: 20px;
  --size-icon-lg: 24px;
  --size-touch-min: 44px;

  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-overlay: 1300;
  --z-modal: 1400;
  --z-toast: 1500;

  --viewport-phone: 375px;
  --viewport-tablet: 768px;
  --viewport-desktop: 1440px;

  --font-family: "Switzer";
  --font-family-panchang: "Panchang";
  --font-family-baton-turbo: "Baton Turbo";
  /* DM Mono is never used lowercase — always pair with text-transform: uppercase. */
  --font-family-dm-mono: "DM Mono";
  --text-transform-dm-mono: uppercase;
  --font-family-switzer: "Switzer";

  --font-size-display: 96px;
  --font-size-h1: 64px;
  --font-size-h2: 48px;
  --font-size-h3: 32px;
  --font-size-h4: 26px;
  --font-size-h5: 22px;
  --font-size-label: 19px;
  --font-size-body-l: 24px;
  --font-size-body-m: 20px;
  --font-size-body-s: 15px;
  --font-size-caption-l: 24px;
  --font-size-caption-m: 15px;
  --font-size-caption-s: 12px;

  --color-text-primary: var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-disabled: var(--color-neutral-400);
  --color-text-on-primary: var(--color-neutral-0);
  --color-text-on-secondary: var(--color-neutral-0);
  --color-bg-page: var(--color-neutral-0);
  --color-bg-surface: var(--color-neutral-0);
  --color-bg-subtle: var(--color-neutral-100);
  --color-border-default: var(--color-neutral-300);
  --color-border-strong: var(--color-neutral-500);
  --color-border-focus: var(--color-primary-700);
  --color-interactive: var(--color-primary-700);
  --color-interactive-hover: var(--color-primary-800);
  --color-interactive-secondary: var(--color-secondary-600);
  --color-interactive-secondary-hover: var(--color-secondary-700);
  --color-feedback-error: var(--color-error-dark);
  --color-feedback-error-bg: var(--color-error-bg);
  --color-feedback-success: var(--color-success-dark);
  --color-feedback-success-bg: var(--color-success-bg);
  --color-feedback-warning: var(--color-warning-dark);
  --color-feedback-warning-bg: var(--color-warning-bg);
  --color-feedback-info: var(--color-secondary-600);
  --color-feedback-info-bg: var(--color-secondary-50);

  /* -----------------------------------------------------------------------
     Motion — authored from the Krypto exhibition motion system sheet.
     Base duration 80 ms. See the reduced-motion block below.
     ----------------------------------------------------------------------- */
  --duration-1: 80ms;
  --duration-2: 160ms;
  --duration-3: 240ms;
  --duration-4: 400ms;
  --duration-5: 640ms;
  --duration-6: 1200ms;
  --duration-ambient: 45s;

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-entrance: cubic-bezier(0, 0, 0, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-mechanical: linear;

  --stagger: 40ms;
  --dimmed-opacity: 0.4;
  --rotation-ambient: 8deg; /* per second */
  --friction: 0.94;

  /* -----------------------------------------------------------------------
     Layer system — z-index scale, local to the station stack.
     Layer = stacking order + role + allowed motion. Not a color.
     ----------------------------------------------------------------------- */
  --layer-0: 0;
  --layer-100: 100;
  --layer-200: 200;
  --layer-300: 300;
  --layer-400: 400;
  --layer-500: 500;

  /* -----------------------------------------------------------------------
     Immersive palette — dark-only station context.
     Reconciled to the Figma tokens: the standalone artefact used approximate
     hex values; these bind to the canonical primitives (primitives lead).
     ----------------------------------------------------------------------- */
  --immersive-bg: var(--color-neutral-900);      /* artefact #000000 */
  --immersive-ink: var(--color-neutral-0);       /* artefact #FFFFFF */
  --immersive-muted: var(--color-neutral-500);   /* artefact #8A8A8A -> #7D8290 */
  --immersive-body: var(--color-neutral-300);    /* artefact #C8C8C8 -> #C7CBD3 */
  --immersive-accent: var(--color-primary-400);  /* artefact #F59B34 -> #F79530 */
  --immersive-focus: var(--color-secondary-500); /* artefact #2B5BFF -> #264EFF */

  /* Layer surfaces + separation — neutral; warmth is reserved for state. */
  --layer-surface-base: var(--color-neutral-900);       /* #000000 */
  --layer-surface-raised: var(--color-neutral-875);     /* #0B0B0F, contained */
  --layer-surface-elevated: var(--color-neutral-850);   /* #1A1C23, overlay/system */
  --layer-border: var(--color-neutral-800);             /* artefact #2A2A2A -> #292C33 */
  --border-surface-raised: var(--color-neutral-800);    /* specialized raised-surface border */

  /* Warm = active/selected — this is where primary-800/900 live. */
  --state-pressed-surface: var(--color-primary-800);  /* #1F1000 */
  --state-selected-surface: var(--color-primary-900); /* #0F0800, artefact #0E0906 */
  --state-accent: var(--color-primary-400);           /* selected / error / attract accent */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-2: 80ms;
    --duration-3: 80ms;
    --duration-4: 80ms;
    --duration-5: 80ms;
    --duration-6: 80ms;
    --stagger: 0ms;
  }
}

[data-theme="dark"] {
  --color-text-primary: var(--color-neutral-0);
  --color-text-secondary: var(--color-neutral-300);
  --color-text-disabled: var(--color-neutral-500);
  --color-text-on-primary: var(--color-neutral-900);
  --color-text-on-secondary: var(--color-neutral-900);
  --color-bg-page: var(--color-neutral-900);
  --color-bg-surface: var(--color-neutral-800);
  --color-bg-subtle: var(--color-neutral-700);
  --color-border-default: var(--color-neutral-700);
  --color-border-strong: var(--color-neutral-500);
  --color-border-focus: var(--color-primary-400);
  --color-interactive: var(--color-primary-400);
  --color-interactive-hover: var(--color-primary-300);
  --color-interactive-secondary: var(--color-secondary-300);
  --color-interactive-secondary-hover: var(--color-secondary-200);
  --color-feedback-error: var(--color-error-light);
  --color-feedback-error-bg: var(--color-error-bg-dark);
  --color-feedback-success: var(--color-success-strong);
  --color-feedback-success-bg: var(--color-success-bg-dark);
  --color-feedback-warning: var(--color-warning-strong);
  --color-feedback-warning-bg: var(--color-warning-bg-dark);
  --color-feedback-info: var(--color-secondary-300);
  --color-feedback-info-bg: var(--color-secondary-900);
}

@media (max-width: 767px) {
  :root {
    --font-size-display: 56px;
    --font-size-h1: 40px;
    --font-size-h2: 32px;
    --font-size-h3: 24px;
    --font-size-h4: 20px;
    --font-size-h5: 18px;
    --font-size-label: 16px;
    --font-size-body-l: 20px;
    --font-size-body-m: 17px;
    --font-size-body-s: 14px;
    --font-size-caption-l: 18px;
    --font-size-caption-m: 13px;
    --font-size-caption-s: 11px;
  }
}

@media (min-width: 768px) and (max-width: 1439px) {
  :root {
    --font-size-display: 72px;
    --font-size-h1: 48px;
    --font-size-h2: 38px;
    --font-size-h3: 28px;
    --font-size-h4: 22px;
    --font-size-h5: 20px;
    --font-size-label: 17px;
    --font-size-body-l: 22px;
    --font-size-body-m: 18px;
    --font-size-body-s: 15px;
    --font-size-caption-l: 20px;
    --font-size-caption-m: 14px;
    --font-size-caption-s: 12px;
  }
}