/*
 * segmnt theme — GENERATED from brand/src/tokens.ts. Do not edit by hand.
 * Regenerate: node brand/scripts/build-theme.ts
 *
 * Light is the default. Opt in to dark with <html data-theme="dark">, or follow
 * the OS with <html data-theme="auto">.
 */

:root {
  color-scheme: light;
  --color-bg: #F4F1EA;
  --color-surface: #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-surface-sunken: #ECE8DE;
  --color-border: #E2DED3;
  --color-border-strong: #8A8475;
  --color-text: #1C2622;
  --color-text-muted: #5E5A4F;
  --color-text-subtle: #8A8475;
  --color-primary: #0B5D42;
  --color-primary-hover: #094A35;
  --color-primary-active: #073828;
  --color-on-primary: #FFFFFF;
  --color-primary-soft: #EAF4EF;
  --color-on-primary-soft: #094A35;
  --color-accent: #C9A227;
  --color-accent-text: #7A5B00;
  --color-focus-ring: #1F7756;
  --color-success: #0B5D42;
  --color-success-soft: #EAF4EF;
  --color-warning: #7A5B00;
  --color-warning-soft: #FFF6E0;
  --color-danger: #B3261E;
  --color-danger-hover: #8F1D17;
  --color-on-danger: #FFFFFF;
  --color-danger-soft: #FBE9E7;
  --color-overlay: rgb(14 21 18 / 0.48);
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgb(28 38 34 / 0.06), 0 1px 1px rgb(28 38 34 / 0.04);
  --shadow-2: 0 4px 12px rgb(28 38 34 / 0.08), 0 1px 3px rgb(28 38 34 / 0.06);
  --shadow-3: 0 12px 32px rgb(28 38 34 / 0.14), 0 2px 6px rgb(28 38 34 / 0.08);

  --font-sans: "IBM Plex Sans Arabic", "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 3.5rem;
  --line-height-tight: 1.2;
  --line-height-snug: 1.35;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.75;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --letter-spacing-tight: -0.01em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.04em;
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  --duration-instant: 0ms;
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --duration-deliberate: 480ms;
  --easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --easing-enter: cubic-bezier(0, 0, 0, 1);
  --easing-exit: cubic-bezier(0.3, 0, 1, 1);
  --z-base: 0;
  --z-sticky: 100;
  --z-dropdown: 1000;
  --z-overlay: 1200;
  --z-modal: 1300;
  --z-toast: 1400;
  --size-control-sm: 32px;
  --size-control-md: 40px;
  --size-control-lg: 48px;
  --size-touch: 44px;
  --size-icon: 20px;
  --size-container-sm: 40rem;
  --size-container-md: 64rem;
  --size-container-lg: 80rem;

  /* Brand kit v1 names — kept so existing CSS keeps working. Prefer the role tokens above. */
  --segmnt-green: var(--color-primary);
  --segmnt-green-contrast: var(--color-on-primary);
  --segmnt-gold: var(--color-accent);
  --segmnt-ink: var(--color-text);
  --segmnt-surface: var(--color-surface);
  --segmnt-surface-soft: var(--color-bg);
  --segmnt-font: var(--font-sans);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0E1512;
  --color-surface: #151E1A;
  --color-surface-raised: #1B2621;
  --color-surface-sunken: #0A100D;
  --color-border: #2A3631;
  --color-border-strong: #66756E;
  --color-text: #E9EFEC;
  --color-text-muted: #A9B5AF;
  --color-text-subtle: #93A19A;
  --color-primary: #6FC79E;
  --color-primary-hover: #A3CDB8;
  --color-primary-active: #CFE6DA;
  --color-on-primary: #04241A;
  --color-primary-soft: rgb(111 199 158 / 0.14);
  --color-on-primary-soft: #A3CDB8;
  --color-accent: #E3C35A;
  --color-accent-text: #E3C35A;
  --color-focus-ring: #6FC79E;
  --color-success: #6FC79E;
  --color-success-soft: rgb(111 199 158 / 0.14);
  --color-warning: #E3C35A;
  --color-warning-soft: rgb(227 195 90 / 0.14);
  --color-danger: #F2B8B5;
  --color-danger-hover: #FBE9E7;
  --color-on-danger: #0E1512;
  --color-danger-soft: rgb(242 184 181 / 0.14);
  --color-overlay: rgb(0 0 0 / 0.64);
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-2: 0 4px 12px rgb(0 0 0 / 0.45), 0 1px 3px rgb(0 0 0 / 0.3);
  --shadow-3: 0 12px 32px rgb(0 0 0 / 0.55), 0 2px 6px rgb(0 0 0 / 0.35);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    color-scheme: dark;
    --color-bg: #0E1512;
    --color-surface: #151E1A;
    --color-surface-raised: #1B2621;
    --color-surface-sunken: #0A100D;
    --color-border: #2A3631;
    --color-border-strong: #66756E;
    --color-text: #E9EFEC;
    --color-text-muted: #A9B5AF;
    --color-text-subtle: #93A19A;
    --color-primary: #6FC79E;
    --color-primary-hover: #A3CDB8;
    --color-primary-active: #CFE6DA;
    --color-on-primary: #04241A;
    --color-primary-soft: rgb(111 199 158 / 0.14);
    --color-on-primary-soft: #A3CDB8;
    --color-accent: #E3C35A;
    --color-accent-text: #E3C35A;
    --color-focus-ring: #6FC79E;
    --color-success: #6FC79E;
    --color-success-soft: rgb(111 199 158 / 0.14);
    --color-warning: #E3C35A;
    --color-warning-soft: rgb(227 195 90 / 0.14);
    --color-danger: #F2B8B5;
    --color-danger-hover: #FBE9E7;
    --color-on-danger: #0E1512;
    --color-danger-soft: rgb(242 184 181 / 0.14);
    --color-overlay: rgb(0 0 0 / 0.64);
    --shadow-0: none;
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-2: 0 4px 12px rgb(0 0 0 / 0.45), 0 1px 3px rgb(0 0 0 / 0.3);
    --shadow-3: 0 12px 32px rgb(0 0 0 / 0.55), 0 2px 6px rgb(0 0 0 / 0.35);
  }
}

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

/* One family for both scripts, in both directions. */
html {
  font-family: var(--font-sans);
}