/* Pathly design tokens (v0.2)
 * Layers: primitives -> semantic color (light only) -> layout -> density -> type.
 * Use semantic tokens (--color-*) in components. Never use primitives directly.
 *
 * Theme:   light only (no dark mode).
 * Density: <html data-density="compact">   (default = comfortable; client portal comfortable, staff console compact)
 * RTL:     use logical CSS properties (margin-inline-start, padding-inline, inset-inline)
 *          so a Persian/RTL layout needs no rebuild.
 * Fonts:   self-host Host Grotesk (Regular 400, Medium 500, SemiBold 600). Do not load it from a
 *          third-party CDN: it may be slow or blocked for clients in Iran.
 */

/* ---------- Primitives ---------- */
:root {
  --violet-50: #F3F0FF;
  --violet-75: #EDE8FF;
  --violet-100: #E6E0FF;
  --violet-200: #CFC4FF;
  --violet-300: #B0A0FF;
  --violet-400: #8D78FA;
  --violet-500: #6F55F0;
  --violet-600: #5A3FD9;
  --violet-700: #4730B5;
  --violet-800: #352588;
  --violet-900: #251A5E;
  --violet-950: #170F40;
  --ink-0: #FFFFFF;
  --ink-50: #F7F6FB;
  --ink-75: #EFF1F8;
  --ink-100: #EFEDF5;
  --ink-150: #ECEAF2;
  --ink-200: #E0DDEA;
  --ink-250: #D0CCDC;
  --ink-300: #C6C2D4;
  --ink-400: #9C97B0;
  --ink-450: #8A859E;
  --ink-500: #6B6680;
  --ink-600: #57526B;
  --ink-700: #3F3B52;
  --ink-800: #2A273A;
  --ink-850: #221F30;
  --ink-900: #1A1826;
  --ink-950: #110F1A;
  --forest-700: #0F4D3A;
  --forest-800: #0B3B2D;
  --forest-900: #082A21;
  --mint-100: #DDF5E8;
  --mint-200: #BDEBD2;
  --mint-300: #96DDB8;
  --amber-50: #FFF1D6;
  --amber-200: #F0C77A;
  --amber-300: #FFC56B;
  --amber-700: #8A4B00;
  --amber-800: #6B4C14;
  --amber-950: #3A2A0C;
  --blue-50: #E3EEFB;
  --blue-200: #A9C8EE;
  --blue-300: #9CC4F7;
  --blue-700: #1F4F8F;
  --blue-800: #25476F;
  --blue-950: #12263F;
  --red-50: #FDE6E4;
  --red-200: #F3B3AE;
  --red-300: #FF9A94;
  --red-600: #C42B2B;
  --red-700: #A3262A;
  --red-800: #7A2B2E;
  --red-950: #3F1517;
  --success-50: #DDF3E4;
  --success-200: #A5D8B6;
  --success-300: #7FD9A0;
  --success-700: #17683A;
  --success-800: #2A6240;
  --success-950: #123222;
  --orange-50: #FFE8DB;
  --orange-200: #F5BE9B;
  --orange-300: #FFAB85;
  --orange-700: #9A3412;
  --orange-800: #7A3D1F;
  --orange-950: #3D1D0E;
  --teal-50: #D9F2F4;
  --teal-200: #96D3D8;
  --teal-300: #7DD8E0;
  --teal-700: #0B6B73;
  --teal-800: #1E5A60;
  --teal-950: #0F3236;
}

/* ---------- Semantic color (light only) ---------- */
:root {
  color-scheme: light;
  --color-bg-page: var(--ink-75);
  --color-bg-surface: var(--ink-0);
  --color-bg-subtle: var(--ink-100);
  --color-bg-inverse: var(--ink-900);
  --color-bg-brand: var(--violet-600);
  --color-bg-brand-hover: var(--violet-700);
  --color-bg-brand-pressed: var(--violet-800);
  --color-bg-brand-subtle: var(--violet-50);
  --color-bg-brand-subtle-hover: var(--violet-100);
  --color-bg-disabled: var(--ink-100);
  --color-bg-accent-mint: var(--mint-100);
  --color-bg-accent-forest: var(--forest-700);
  --color-text-primary: var(--ink-900);
  --color-text-secondary: var(--ink-600);
  --color-text-tertiary: var(--ink-500);
  --color-text-disabled: var(--ink-400);
  --color-text-on-brand: var(--ink-0);
  --color-text-brand: var(--violet-600);
  --color-text-inverse: var(--ink-0);
  --color-text-on-accent-forest: var(--mint-100);
  --color-border-default: var(--ink-200);
  --color-border-strong: var(--ink-300);
  --color-border-input: var(--ink-500);
  --color-border-brand: var(--violet-600);
  --color-border-focus: var(--violet-500);
  --color-status-needed-bg: var(--amber-50);
  --color-status-needed-text: var(--amber-700);
  --color-status-needed-border: var(--amber-200);
  --color-status-received-bg: var(--blue-50);
  --color-status-received-text: var(--blue-700);
  --color-status-received-border: var(--blue-200);
  --color-status-in-review-bg: var(--violet-75);
  --color-status-in-review-text: var(--violet-700);
  --color-status-in-review-border: var(--violet-200);
  --color-status-needs-fixing-bg: var(--red-50);
  --color-status-needs-fixing-text: var(--red-700);
  --color-status-needs-fixing-border: var(--red-200);
  --color-status-complete-bg: var(--success-50);
  --color-status-complete-text: var(--success-700);
  --color-status-complete-border: var(--success-200);
  --color-status-expired-bg: var(--orange-50);
  --color-status-expired-text: var(--orange-700);
  --color-status-expired-border: var(--orange-200);
  --color-status-waiting-bg: var(--teal-50);
  --color-status-waiting-text: var(--teal-700);
  --color-status-waiting-border: var(--teal-200);
  --color-status-locked-bg: var(--ink-150);
  --color-status-locked-text: var(--ink-600);
  --color-status-locked-border: var(--ink-250);
  --color-status-not-applicable-bg: var(--ink-0);
  --color-status-not-applicable-text: var(--ink-500);
  --color-status-not-applicable-border: var(--ink-300);
  --color-status-overdue-bg: var(--red-600);
  --color-status-overdue-text: var(--ink-0);
  --color-status-overdue-border: var(--red-700);
}

/* ---------- Layout ---------- */
:root {
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --radius-none: 0px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;

  --border-width-default: 1px;
  --border-width-strong: 2px;

  --shadow-sm: 0 1px 3px rgb(26 24 38 / 0.06);
  --shadow-md: 0 4px 12px rgb(26 24 38 / 0.10);
  --shadow-lg: 0 12px 32px rgb(26 24 38 / 0.14);
  /* Focus ring: surface-colored gap + brand ring. Apply with :focus-visible. */
  --shadow-focus-ring: 0 0 0 2px var(--color-bg-surface), 0 0 0 5px var(--color-border-focus);
}

/* ---------- Density ---------- */
:root, [data-density="comfortable"] {
  --density-control-height: 48px;
  --density-control-padding-x: 16px;
  --density-row-height: 64px;
  --density-card-padding: 20px;
  --density-stack-gap: 16px;
  --density-touch-target: 44px;
}
[data-density="compact"] {
  --density-control-height: 36px;
  --density-control-padding-x: 12px;
  --density-row-height: 44px;
  --density-card-padding: 12px;
  --density-stack-gap: 8px;
  --density-touch-target: 32px;
}

/* ---------- Typography (Host Grotesk) ---------- */
:root {
  --font-family-sans: "Host Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
}
body { font-family: var(--font-family-sans); color: var(--color-text-primary); background: var(--color-bg-page); }

/* font shorthand: weight size/line-height family. Letter-spacing in em. */
.text-display-xl { font: 600 2.5rem/3rem var(--font-family-sans); letter-spacing: -0.01em; }
.text-display-lg { font: 600 2rem/2.5rem var(--font-family-sans); letter-spacing: -0.01em; }
.text-number-lg  { font: 600 2rem/2.5rem var(--font-family-sans); letter-spacing: -0.005em; font-variant-numeric: tabular-nums; }
.text-heading-lg { font: 600 1.5rem/2rem var(--font-family-sans); letter-spacing: -0.005em; }
.text-heading-md { font: 600 1.25rem/1.75rem var(--font-family-sans); }
.text-heading-sm { font: 600 1.125rem/1.625rem var(--font-family-sans); }
.text-body-lg    { font: 400 1.125rem/1.75rem var(--font-family-sans); }
.text-body-md    { font: 400 1rem/1.5rem var(--font-family-sans); }
.text-body-sm    { font: 400 0.875rem/1.25rem var(--font-family-sans); }
.text-label-md   { font: 500 0.875rem/1.25rem var(--font-family-sans); }
.text-label-sm   { font: 500 0.75rem/1rem var(--font-family-sans); letter-spacing: 0.002em; }
.text-caption    { font: 400 0.75rem/1rem var(--font-family-sans); letter-spacing: 0.002em; }
.text-button-lg  { font: 600 1rem/1.5rem var(--font-family-sans); }
.text-button-md  { font: 600 0.875rem/1.25rem var(--font-family-sans); }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}