/* Zoono design tokens. Generated by scripts/build-css.mjs; edit tokens/*.tokens.json instead. */
/* Token status (com.zoono): 144 approved, 8 declared, 25 proposed. Approved decisions are in DECISIONS.md. */

:root {
  color-scheme: light;
  --z-purple-50: #F5F6FF;
  --z-purple-100: #EAEBFF;
  --z-purple-200: #D9DAFF;
  --z-purple-300: #C0C0FF;
  --z-purple-400: #A5A1FF;
  --z-purple-500: #8B80FF;
  --z-purple-600: #6D44FF;
  --z-purple-700: #6234ED;
  --z-purple-800: #4E14CA;
  --z-purple-900: #3A009E;
  --z-purple-950: #26006E;
  --z-orange-50: #FFF4F1;
  --z-orange-100: #FFE7E0;
  --z-orange-200: #FFD3C5;
  --z-orange-300: #FFB19A;
  --z-orange-400: #FF8763;
  --z-orange-500: #FF6B3D;
  --z-orange-600: #D3481F;
  --z-orange-700: #B33009;
  --z-orange-800: #911E00;
  --z-orange-900: #6E1100;
  --z-orange-950: #4D0700;
  --z-pink-50: #FFF3F6;
  --z-pink-100: #FFE5EC;
  --z-pink-200: #FFCFDC;
  --z-pink-300: #FFABC4;
  --z-pink-400: #FF7DA8;
  --z-pink-500: #FF388D;
  --z-pink-600: #DF1476;
  --z-pink-700: #BA005F;
  --z-pink-800: #93004A;
  --z-pink-900: #6F0036;
  --z-pink-950: #4C0023;
  --z-yellow-50: #FFF6E2;
  --z-yellow-100: #FFEBBF;
  --z-yellow-200: #FFD984;
  --z-yellow-300: #FFC629;
  --z-yellow-400: #DEA200;
  --z-yellow-500: #C38900;
  --z-yellow-600: #A77100;
  --z-yellow-700: #8C5A00;
  --z-yellow-800: #714400;
  --z-yellow-900: #563000;
  --z-yellow-950: #3B1E00;
  --z-green-50: #E8FDF3;
  --z-green-100: #D5F6E7;
  --z-green-200: #BAEBD5;
  --z-green-300: #8EDABB;
  --z-green-400: #57C69D;
  --z-green-500: #18B487;
  --z-green-600: #00946D;
  --z-green-700: #007959;
  --z-green-800: #005F45;
  --z-green-900: #004632;
  --z-green-950: #002F20;
  --z-danger-50: #FFF4F3;
  --z-danger-100: #FFE6E4;
  --z-danger-200: #FFD1CD;
  --z-danger-300: #FFB0A8;
  --z-danger-400: #FF847D;
  --z-danger-500: #F45956;
  --z-danger-600: #E43037;
  --z-danger-700: #C0021F;
  --z-danger-800: #990016;
  --z-danger-900: #73000E;
  --z-danger-950: #4F0006;
  --z-neutral-0: #FFFFFF;
  --z-neutral-50: #FEF9EF;
  --z-neutral-100: #F6F1E7;
  --z-neutral-200: #E4DFD6;
  --z-neutral-300: #CECAC2;
  --z-neutral-400: #AEAAA3;
  --z-neutral-500: #89867F;
  --z-neutral-600: #6E6B66;
  --z-neutral-700: #56544F;
  --z-neutral-800: #403E3A;
  --z-neutral-900: #2D2B27;
  --z-neutral-950: #1A1A1A;

  --z-bg-page: #F6F1E7;
  --z-bg-surface: #FFFFFF;
  --z-bg-sunken: #E4DFD6;
  --z-text-primary: #1A1A1A;
  --z-text-secondary: #56544F;
  --z-text-on-brand: #FFFFFF;
  --z-border: #CECAC2;
  --z-border-strong: #89867F;
  --z-brand: #6D44FF;
  --z-brand-hover: #6234ED;
  --z-brand-subtle: #EAEBFF;
  --z-text-brand: #6D44FF;
  --z-success: #007959;
  --z-success-subtle: #D5F6E7;
  --z-warning: #FFC629;
  --z-warning-text: #714400;
  --z-warning-subtle: #FFEBBF;
  --z-danger: #C0021F;
  --z-danger-subtle: #FFE6E4;
  --z-danger-fill: #C0021F;
  --z-focus: #6D44FF;
  --z-accent-orange: #FF6B3D;
  --z-accent-pink: #FF388D;
  --z-accent-yellow: #FFC629;
  --z-accent-green: #18B487;
  --z-text-on-accent: #1A1A1A;
  --z-shadow-raised: 0 1px 2px rgb(26 26 26 / 0.06), 0 10px 28px rgb(26 26 26 / 0.12);

  --z-font-latin: "Plus Jakarta Sans", system-ui, sans-serif;
  --z-font-arabic: "IBM Plex Sans Arabic", "Plus Jakarta Sans", system-ui, sans-serif;
  --z-font: var(--z-font-latin);
  --z-type-display-xl: 800 60px/64px var(--z-font);
  --z-tracking-display-xl: -0.02em;
  --z-type-display-lg: 800 48px/52px var(--z-font);
  --z-tracking-display-lg: -0.02em;
  --z-type-display: 800 32px/38px var(--z-font);
  --z-tracking-display: -0.02em;
  --z-type-title-1: 700 24px/30px var(--z-font);
  --z-tracking-title-1: -0.01em;
  --z-type-title-2: 700 20px/26px var(--z-font);
  --z-tracking-title-2: -0.01em;
  --z-type-title-3: 700 17px/24px var(--z-font);
  --z-tracking-title-3: 0;
  --z-type-body-lg: 400 17px/26px var(--z-font);
  --z-tracking-body-lg: 0;
  --z-type-body: 400 16px/24px var(--z-font);
  --z-tracking-body: 0;
  --z-type-label: 600 14px/20px var(--z-font);
  --z-tracking-label: 0;
  --z-type-caption: 500 13px/18px var(--z-font);
  --z-tracking-caption: 0;

  --z-space-0: 0;
  --z-space-1: 4px;
  --z-space-2: 8px;
  --z-space-3: 12px;
  --z-space-4: 16px;
  --z-space-5: 20px;
  --z-space-6: 24px;
  --z-space-8: 32px;
  --z-space-10: 40px;
  --z-space-12: 48px;
  --z-space-16: 64px;
  --z-radius-sm: 8px;
  --z-radius-md: 12px;
  --z-radius-lg: 16px;
  --z-radius-xl: 24px;
  --z-radius-pill: 999px;
  --z-size-control-sm: 36px;
  --z-size-control-md: 44px;
  --z-size-control-lg: 52px;
  --z-size-touch: 44px;
  --z-duration-fast: 120ms;
  --z-duration-base: 200ms;
  --z-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Arabic: its own font, taller lines for its ascenders, descenders and marks,
   and no letter-spacing (it breaks the joins between Arabic letters). */
:lang(ar) {
  --z-font: var(--z-font-arabic);
  --z-type-display-xl: 800 60px/80px var(--z-font);
  --z-tracking-display-xl: 0;
  --z-type-display-lg: 800 48px/64px var(--z-font);
  --z-tracking-display-lg: 0;
  --z-type-display: 800 32px/46px var(--z-font);
  --z-tracking-display: 0;
  --z-type-title-1: 700 24px/38px var(--z-font);
  --z-tracking-title-1: 0;
  --z-type-title-2: 700 20px/32px var(--z-font);
  --z-tracking-title-2: 0;
  --z-type-title-3: 700 17px/28px var(--z-font);
  --z-tracking-title-3: 0;
  --z-type-body-lg: 400 17px/30px var(--z-font);
  --z-tracking-body-lg: 0;
  --z-type-body: 400 16px/28px var(--z-font);
  --z-tracking-body: 0;
  --z-type-label: 600 14px/24px var(--z-font);
  --z-tracking-label: 0;
  --z-type-caption: 500 13px/22px var(--z-font);
  --z-tracking-caption: 0;
}
/* Back to Latin for English inside an Arabic screen. */
:lang(en) {
  --z-font: var(--z-font-latin);
  --z-type-display-xl: 800 60px/64px var(--z-font);
  --z-tracking-display-xl: -0.02em;
  --z-type-display-lg: 800 48px/52px var(--z-font);
  --z-tracking-display-lg: -0.02em;
  --z-type-display: 800 32px/38px var(--z-font);
  --z-tracking-display: -0.02em;
  --z-type-title-1: 700 24px/30px var(--z-font);
  --z-tracking-title-1: -0.01em;
  --z-type-title-2: 700 20px/26px var(--z-font);
  --z-tracking-title-2: -0.01em;
  --z-type-title-3: 700 17px/24px var(--z-font);
  --z-tracking-title-3: 0;
  --z-type-body-lg: 400 17px/26px var(--z-font);
  --z-tracking-body-lg: 0;
  --z-type-body: 400 16px/24px var(--z-font);
  --z-tracking-body: 0;
  --z-type-label: 600 14px/20px var(--z-font);
  --z-tracking-label: 0;
  --z-type-caption: 500 13px/18px var(--z-font);
  --z-tracking-caption: 0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --z-bg-page: #1A1A1A;
    --z-bg-surface: #2D2B27;
    --z-bg-sunken: #121212;
    --z-text-primary: #F6F1E7;
    --z-text-secondary: #AEAAA3;
    --z-text-on-brand: #FFFFFF;
    --z-border: #403E3A;
    --z-border-strong: #89867F;
    --z-brand: #6D44FF;
    --z-brand-hover: #6234ED;
    --z-brand-subtle: #3B3157;
    --z-text-brand: #C0C0FF;
    --z-success: #57C69D;
    --z-success-subtle: #2A4136;
    --z-warning: #FFC629;
    --z-warning-text: #FFC629;
    --z-warning-subtle: #4A4127;
    --z-danger: #FF847D;
    --z-danger-subtle: #4A2C2A;
    --z-danger-fill: #C0021F;
    --z-focus: #C0C0FF;
    --z-accent-orange: #FF6B3D;
    --z-accent-pink: #FF388D;
    --z-accent-yellow: #FFC629;
    --z-accent-green: #18B487;
    --z-text-on-accent: #1A1A1A;
    --z-shadow-raised: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 32px rgb(0 0 0 / 0.5);
  }
}
[data-theme="dark"] {
  color-scheme: dark;
  --z-bg-page: #1A1A1A;
  --z-bg-surface: #2D2B27;
  --z-bg-sunken: #121212;
  --z-text-primary: #F6F1E7;
  --z-text-secondary: #AEAAA3;
  --z-text-on-brand: #FFFFFF;
  --z-border: #403E3A;
  --z-border-strong: #89867F;
  --z-brand: #6D44FF;
  --z-brand-hover: #6234ED;
  --z-brand-subtle: #3B3157;
  --z-text-brand: #C0C0FF;
  --z-success: #57C69D;
  --z-success-subtle: #2A4136;
  --z-warning: #FFC629;
  --z-warning-text: #FFC629;
  --z-warning-subtle: #4A4127;
  --z-danger: #FF847D;
  --z-danger-subtle: #4A2C2A;
  --z-danger-fill: #C0021F;
  --z-focus: #C0C0FF;
  --z-accent-orange: #FF6B3D;
  --z-accent-pink: #FF388D;
  --z-accent-yellow: #FFC629;
  --z-accent-green: #18B487;
  --z-text-on-accent: #1A1A1A;
  --z-shadow-raised: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 32px rgb(0 0 0 / 0.5);
}
[data-theme="light"] {
  color-scheme: light;
  --z-bg-page: #F6F1E7;
  --z-bg-surface: #FFFFFF;
  --z-bg-sunken: #E4DFD6;
  --z-text-primary: #1A1A1A;
  --z-text-secondary: #56544F;
  --z-text-on-brand: #FFFFFF;
  --z-border: #CECAC2;
  --z-border-strong: #89867F;
  --z-brand: #6D44FF;
  --z-brand-hover: #6234ED;
  --z-brand-subtle: #EAEBFF;
  --z-text-brand: #6D44FF;
  --z-success: #007959;
  --z-success-subtle: #D5F6E7;
  --z-warning: #FFC629;
  --z-warning-text: #714400;
  --z-warning-subtle: #FFEBBF;
  --z-danger: #C0021F;
  --z-danger-subtle: #FFE6E4;
  --z-danger-fill: #C0021F;
  --z-focus: #6D44FF;
  --z-accent-orange: #FF6B3D;
  --z-accent-pink: #FF388D;
  --z-accent-yellow: #FFC629;
  --z-accent-green: #18B487;
  --z-text-on-accent: #1A1A1A;
  --z-shadow-raised: 0 1px 2px rgb(26 26 26 / 0.06), 0 10px 28px rgb(26 26 26 / 0.12);
}

@media (prefers-reduced-motion: reduce) {
  :root { --z-duration-fast: 0ms; --z-duration-base: 0ms; }
}