/* Maalob brand tokens — generated 2026-10-31 by /naksha:brand-kit.
   Source of truth for the palette: design/maalob-brand-tokens.json.
   Tiers: 1 primitives (never used directly in components) · 2 semantic · 3 component.
   Themes: light on :root; dark via prefers-color-scheme (unless data-theme="light") or data-theme="dark".
   Brand anchors: jade-700 = #0F766E (primary), amber-500 = #F59E0B (accent). */

/* ── Tier 1: primitives ─────────────────────────────────────────── */
:root {
  --jade-50: #F3FCFB;
  --jade-100: #E3F7F5;
  --jade-200: #C8EFEC;
  --jade-300: #9CE2DD;
  --jade-400: #61D1C8;
  --jade-500: #35B6AC;
  --jade-600: #288A83;
  --jade-700: #0F766E;
  --jade-800: #0C5A54;
  --jade-900: #083F3B;
  --jade-950: #052926;
  --amber-50: #FDF9F1;
  --amber-100: #FBF1DF;
  --amber-200: #F8E3BF;
  --amber-300: #F2CC8C;
  --amber-400: #EBAE47;
  --amber-500: #F59E0B;
  --amber-600: #AB6E07;
  --amber-700: #845505;
  --amber-800: #623F04;
  --amber-900: #452C03;
  --amber-950: #2C1C02;
  --neutral-0: #FFFFFF;
  --neutral-50: #F8F9F9;
  --neutral-100: #F1F3F3;
  --neutral-200: #E4E7E7;
  --neutral-300: #D1D6D6;
  --neutral-400: #A3AEAD;
  --neutral-500: #788786;
  --neutral-600: #606C6B;
  --neutral-700: #4A5453;
  --neutral-800: #353B3B;
  --neutral-900: #222626;
  --neutral-950: #141717;
  --success-50: #F2FDF6;
  --success-100: #E0FAEA;
  --success-200: #C2F5D5;
  --success-300: #91EDB4;
  --success-400: #50E287;
  --success-500: #21CA60;
  --success-600: #199949;
  --success-700: #15803D;
  --success-800: #0E582A;
  --success-900: #0A3D1D;
  --success-950: #062713;
  --warning-50: #FEF5F1;
  --warning-100: #FDE7DD;
  --warning-200: #FBCEBC;
  --warning-300: #F8A887;
  --warning-400: #F3733F;
  --warning-500: #DD4A0E;
  --warning-600: #C2410C;
  --warning-700: #822B08;
  --warning-800: #602006;
  --warning-900: #431704;
  --warning-950: #2B0E03;
  --error-50: #FDF2F2;
  --error-100: #FAE0E0;
  --error-200: #F5C2C2;
  --error-300: #ED9191;
  --error-400: #E34F4F;
  --error-500: #DC2626;
  --error-600: #9A1919;
  --error-700: #771313;
  --error-800: #580E0E;
  --error-900: #3D0A0A;
  --error-950: #280606;
  --info-50: #F1F5FE;
  --info-100: #DEE8FC;
  --info-200: #BED0F9;
  --info-300: #8AABF4;
  --info-400: #2563EB;
  --info-500: #1451D7;
  --info-600: #0F3DA3;
  --info-700: #0C2F7E;
  --info-800: #09235D;
  --info-900: #061941;
  --info-950: #04102A;

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 0.75rem; /* 12px */
  --leading-xs: 1rem; /* 16px */
  --text-sm: 0.875rem; /* 14px */
  --leading-sm: 1.25rem; /* 20px */
  --text-base: 1rem; /* 16px */
  --leading-base: 1.5rem; /* 24px */
  --text-lg: 1.125rem; /* 18px */
  --leading-lg: 1.75rem; /* 28px */
  --text-xl: 1.25rem; /* 20px */
  --leading-xl: 1.75rem; /* 28px */
  --text-2xl: 1.5rem; /* 24px */
  --leading-2xl: 2rem; /* 32px */
  --text-3xl: 1.875rem; /* 30px */
  --leading-3xl: 2.25rem; /* 36px */
  --text-4xl: 2.25rem; /* 36px */
  --leading-4xl: 2.5rem; /* 40px */
  --text-5xl: 3rem; /* 48px */
  --leading-5xl: 3rem; /* 48px */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --space-0: 0rem; /* 0px */
  --space-0-5: 0.125rem; /* 2px */
  --space-1: 0.25rem; /* 4px */
  --space-1-5: 0.375rem; /* 6px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem; /* 24px */
  --space-8: 2rem; /* 32px */
  --space-10: 2.5rem; /* 40px */
  --space-12: 3rem; /* 48px */
  --space-16: 4rem; /* 64px */
  --space-20: 5rem; /* 80px */
  --space-24: 6rem; /* 96px */

  --radius-sm: 0.25rem; /* 4px */
  --radius-md: 0.375rem; /* 6px */
  --radius-lg: 0.5rem; /* 8px */
  --radius-xl: 0.75rem; /* 12px */
  --radius-2xl: 1rem; /* 16px */
  --radius-full: 9999px;
}

/* ── Tier 2: semantic (light) ───────────────────────────────────── */
:root {
  --color-background: var(--neutral-50);
  --color-surface: var(--neutral-0);
  --color-surface-raised: var(--neutral-0);
  --color-border: var(--neutral-200);
  --color-border-strong: var(--neutral-500); /* 3.74:1 on white: input and control boundaries (WCAG 1.4.11) */
  --color-text: var(--neutral-900);
  --color-text-secondary: var(--neutral-600);
  --color-text-muted: var(--neutral-500); /* placeholders and disabled only: 3.7:1, not for body text */
  --color-primary: var(--jade-700);
  --color-primary-hover: var(--jade-800);
  --color-primary-subtle: var(--jade-50);
  --color-primary-text: var(--jade-700);
  --color-on-primary: #FFFFFF;
  --color-accent: var(--amber-500);
  --color-accent-subtle: var(--amber-100);
  --color-accent-text: var(--amber-700);
  --color-on-accent: var(--neutral-900);
  --color-focus-ring: var(--amber-500);
  --color-success: #15803D;
  --color-success-bg: #F2FDF6;
  --color-success-border: #C2F5D5;
  --color-success-solid: #15803D;
  --color-warning: #C2410C;
  --color-warning-bg: #FEF5F1;
  --color-warning-border: #FBCEBC;
  --color-warning-solid: #C2410C;
  --color-error: #9A1919;
  --color-error-bg: #FDF2F2;
  --color-error-border: #F5C2C2;
  --color-error-solid: #9A1919;
  --color-info: #0F3DA3;
  --color-info-bg: #F1F5FE;
  --color-info-border: #BED0F9;
  --color-info-solid: #0F3DA3;
  --shadow-card: 0 1px 3px rgb(20 23 23 / 0.08), 0 1px 2px rgb(20 23 23 / 0.04);
  --shadow-card-hover: 0 6px 16px rgb(20 23 23 / 0.10);

  --space-inline-sm: var(--space-2);
  --space-inline-md: var(--space-4);
  --space-stack-sm: var(--space-2);
  --space-stack-md: var(--space-4);
  --space-stack-lg: var(--space-8);
  --space-section: var(--space-16);

  --radius-button: var(--radius-lg);
  --radius-input: var(--radius-lg);
  --radius-card: var(--radius-xl);
  --radius-modal: var(--radius-2xl);
  --radius-badge: var(--radius-full);
}

/* ── Tier 2: semantic (dark) ────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --color-background: var(--neutral-950);
  --color-surface: var(--neutral-900);
  --color-surface-raised: var(--neutral-800);
  --color-border: var(--neutral-700);
  --color-border-strong: var(--neutral-500); /* 4.08:1 on neutral-900 surface */
  --color-text: var(--neutral-50);
  --color-text-secondary: var(--neutral-400);
  --color-text-muted: var(--neutral-500);
  --color-primary: var(--jade-700);
  --color-primary-hover: var(--jade-600);
  --color-primary-subtle: var(--jade-950);
  --color-primary-text: var(--jade-400);
  --color-on-primary: #FFFFFF;
  --color-accent: var(--amber-500);
  --color-accent-subtle: var(--amber-950);
  --color-accent-text: var(--amber-400);
  --color-on-accent: var(--neutral-900);
  --color-focus-ring: var(--amber-400);
  --color-success: #91EDB4;
  --color-success-bg: #062713;
  --color-success-border: #0E582A;
  --color-success-solid: #15803D;
  --color-warning: #F8A887;
  --color-warning-bg: #2B0E03;
  --color-warning-border: #602006;
  --color-warning-solid: #C2410C;
  --color-error: #ED9191;
  --color-error-bg: #280606;
  --color-error-border: #580E0E;
  --color-error-solid: #9A1919;
  --color-info: #8AABF4;
  --color-info-bg: #04102A;
  --color-info-border: #09235D;
  --color-info-solid: #0F3DA3;
  --shadow-card: 0 1px 3px rgb(0 0 0 / 0.35);
  --shadow-card-hover: 0 6px 16px rgb(0 0 0 / 0.45);
  color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --color-background: var(--neutral-950);
  --color-surface: var(--neutral-900);
  --color-surface-raised: var(--neutral-800);
  --color-border: var(--neutral-700);
  --color-border-strong: var(--neutral-500); /* 4.08:1 on neutral-900 surface */
  --color-text: var(--neutral-50);
  --color-text-secondary: var(--neutral-400);
  --color-text-muted: var(--neutral-500);
  --color-primary: var(--jade-700);
  --color-primary-hover: var(--jade-600);
  --color-primary-subtle: var(--jade-950);
  --color-primary-text: var(--jade-400);
  --color-on-primary: #FFFFFF;
  --color-accent: var(--amber-500);
  --color-accent-subtle: var(--amber-950);
  --color-accent-text: var(--amber-400);
  --color-on-accent: var(--neutral-900);
  --color-focus-ring: var(--amber-400);
  --color-success: #91EDB4;
  --color-success-bg: #062713;
  --color-success-border: #0E582A;
  --color-success-solid: #15803D;
  --color-warning: #F8A887;
  --color-warning-bg: #2B0E03;
  --color-warning-border: #602006;
  --color-warning-solid: #C2410C;
  --color-error: #ED9191;
  --color-error-bg: #280606;
  --color-error-border: #580E0E;
  --color-error-solid: #9A1919;
  --color-info: #8AABF4;
  --color-info-bg: #04102A;
  --color-info-border: #09235D;
  --color-info-solid: #0F3DA3;
  --shadow-card: 0 1px 3px rgb(0 0 0 / 0.35);
  --shadow-card-hover: 0 6px 16px rgb(0 0 0 / 0.45);
  color-scheme: dark;
}

/* ── Tier 3: component ──────────────────────────────────────────── */
:root {
  --button-height-sm: 2rem;   /* 32px */
  --button-height-md: 2.5rem; /* 40px */
  --button-height-lg: 3rem;   /* 48px */
  --button-padding-x: var(--space-4);
  --button-font-size: var(--text-sm);
  --button-font-weight: var(--weight-semibold);
  --button-radius: var(--radius-button);

  --input-height: 2.5rem;     /* 40px */
  --input-padding-x: var(--space-3);
  --input-radius: var(--radius-input);
  --input-border: 1px solid var(--color-border-strong);
  --input-focus-ring: 0 0 0 3px var(--color-focus-ring);

  --card-padding: var(--space-6);
  --card-radius: var(--radius-card);
  --card-border: 1px solid var(--color-border);
  --card-shadow: var(--shadow-card);

  --avatar-size-sm: 2rem;     /* 32px */
  --avatar-size-md: 2.5rem;   /* 40px */
  --avatar-size-lg: 3.5rem;   /* 56px */

  /* Clock (kiosk) — read at arm's length on a wall-mounted tablet */
  --clock-key-size: 4.5rem;   /* 72px PIN keys: well above the 48px touch minimum */
  --clock-key-radius: var(--radius-2xl);
  --clock-greeting-size: var(--text-5xl);
  --clock-time-size: 4.5rem;  /* 72px */
}