/* ============================================================
   Simiaroom Design System — tokens.css
   Source: Figma "Simiaroom — Design System" (file DJXoBE5WCQOaKmWUfHvCYh), v1.0
   Synced via Figma MCP on 2026-09-29 (۷ مهر ۱۴۰۵). Do not edit by hand.
   Usage: <html dir="rtl" lang="fa">, link this file, use var(--sr-*) only.
   Dark theme: <html data-theme="dark"> or prefers-color-scheme (unless data-theme="light").
   ============================================================ */

:root {
  /* ---------- Primitives (raw palette — never bind directly in UI; use roles) ---------- */
  --sr-green-70: #3cbe8b;   /* brand green */
  --sr-green-80: #6fd6ab;
  --sr-coral-70: #e28a72;   /* brand coral — under 5% of total weight */
  --sr-navy-10:  #0d1526;
  --sr-navy-20:  #1b2a4b;   /* brand navy — ink */
  --sr-navy-30:  #2a3d66;
  --sr-neutral-50:  #75787c;
  --sr-neutral-90:  #e2e5e9;
  --sr-neutral-94:  #edf0f4;
  --sr-neutral-96:  #f4f6fa;
  --sr-neutral-100: #ffffff;
  --sr-error-40: #b02a26;
  --sr-error-80: #ffb4ab;
  --sr-teal-50:  #2c8c8a;   /* charts only */
  --sr-amber-50: #a35d00;   /* functional warning — deliberately outside brand palette */
  --sr-amber-70: #e8a33d;

  /* ---------- Color roles — Light (default) ---------- */
  --sr-color-primary: var(--sr-green-70);          /* FILL only — never text */
  --sr-color-on-primary: var(--sr-neutral-100);
  --sr-color-secondary: var(--sr-coral-70);        /* FILL only */
  --sr-color-on-secondary: var(--sr-neutral-100);
  --sr-color-error: var(--sr-error-40);
  --sr-color-on-error: var(--sr-neutral-100);
  --sr-color-success: var(--sr-green-70);
  --sr-color-on-success: var(--sr-neutral-100);
  --sr-color-warning: var(--sr-amber-50);
  --sr-color-on-warning: var(--sr-neutral-100);

  --sr-color-background: var(--sr-neutral-100);
  --sr-color-on-background: var(--sr-navy-20);
  --sr-color-surface: var(--sr-neutral-100);
  --sr-color-on-surface: var(--sr-navy-20);        /* default ink, links, emphasis */
  --sr-color-surface-variant: var(--sr-neutral-94);
  --sr-color-on-surface-variant: var(--sr-neutral-50);
  --sr-color-surface-container-lowest: var(--sr-neutral-100);
  --sr-color-surface-container-low: var(--sr-neutral-96);
  --sr-color-surface-container: var(--sr-neutral-94);
  --sr-color-surface-container-high: var(--sr-neutral-90);
  --sr-color-surface-container-highest: var(--sr-neutral-90);
  --sr-color-outline: var(--sr-neutral-90);
  --sr-color-outline-variant: var(--sr-neutral-94);
  --sr-color-inverse-surface: var(--sr-navy-20);
  --sr-color-inverse-on-surface: var(--sr-neutral-100);
  --sr-color-inverse-primary: var(--sr-green-80);
  --sr-color-scrim: var(--sr-navy-20);
  --sr-color-focus-ring: var(--sr-navy-20);        /* 2px outline, 2px offset — never green */

  /* session states */
  --sr-color-session-scheduled-main: var(--sr-navy-20);
  --sr-color-session-scheduled-text: var(--sr-navy-20);
  --sr-color-session-scheduled-band: var(--sr-navy-20);
  --sr-color-session-live-main: var(--sr-green-70);
  --sr-color-session-live-text: var(--sr-navy-20);
  --sr-color-session-live-band: var(--sr-green-70);
  --sr-color-session-completed-main: var(--sr-neutral-50);
  --sr-color-session-completed-text: var(--sr-neutral-50);
  --sr-color-session-completed-band: var(--sr-neutral-50);
  --sr-color-session-cancelled-main: var(--sr-error-40);
  --sr-color-session-cancelled-text: var(--sr-error-40);
  --sr-color-session-cancelled-band: var(--sr-error-40);
  --sr-color-session-missed-main: var(--sr-amber-50);
  --sr-color-session-missed-text: var(--sr-navy-20);
  --sr-color-session-missed-band: var(--sr-amber-50);
  /* availability */
  --sr-color-availability-open: var(--sr-green-70);
  --sr-color-availability-limited: var(--sr-amber-50);
  --sr-color-availability-waitlist: var(--sr-neutral-50);
  /* charts only (max 4 series) */
  --sr-color-chart-series-1: var(--sr-green-70);
  --sr-color-chart-series-2: var(--sr-navy-20);
  --sr-color-chart-series-3: var(--sr-coral-70);
  --sr-color-chart-series-4: var(--sr-teal-50);
  --sr-color-chart-grid: var(--sr-neutral-90);
  --sr-color-chart-axis: var(--sr-neutral-50);

  /* ---------- Brand gradients (marketing surfaces only: hero, CTA band, cover) ---------- */
  --sr-gradient-green-navy: linear-gradient(45deg, #3cbe8b 0%, #1b2a4b 100%);
  --sr-gradient-navy-green: linear-gradient(45deg, #1b2a4b 0%, #3cbe8b 100%);
  --sr-gradient-navy-coral: linear-gradient(45deg, #1b2a4b 0%, #e28a72 100%);

  /* ---------- Typography ---------- */
  --sr-font-family: 'Peyda', 'Vazirmatn', 'YekanBakh', Tahoma, system-ui, sans-serif;
  --sr-font-weight-regular: 400;
  --sr-font-weight-medium: 500;    /* headings are Medium, never Bold */
  --sr-font-weight-semibold: 600;  /* Title/Small only */
  /* size / line-height (px) — Desktop values; Mobile overrides below 834px */
  --sr-text-display-large-size: 64px;   --sr-text-display-large-lh: 69.1px;
  --sr-text-display-medium-size: 52px;  --sr-text-display-medium-lh: 58.2px;
  --sr-text-display-small-size: 42px;   --sr-text-display-small-lh: 48.7px;
  --sr-text-headline-large-size: 36px;  --sr-text-headline-large-lh: 43.2px;
  --sr-text-headline-medium-size: 30px; --sr-text-headline-medium-lh: 37.5px;
  --sr-text-headline-small-size: 26px;  --sr-text-headline-small-lh: 33.8px;
  --sr-text-title-large-size: 22px;     --sr-text-title-large-lh: 30.8px;
  --sr-text-title-medium-size: 18px;    --sr-text-title-medium-lh: 26.1px;
  --sr-text-title-small-size: 16px;     --sr-text-title-small-lh: 24px;
  --sr-text-body-large-size: 18px;      --sr-text-body-large-lh: 34.2px;
  --sr-text-body-medium-size: 16px;     --sr-text-body-medium-lh: 30.4px;
  --sr-text-body-small-size: 14px;      --sr-text-body-small-lh: 25.9px;
  --sr-text-label-large-size: 16px;     --sr-text-label-large-lh: 22.4px;
  --sr-text-label-medium-size: 14px;    --sr-text-label-medium-lh: 19.6px;
  --sr-text-label-small-size: 12px;     --sr-text-label-small-lh: 16.8px; --sr-text-label-small-ls: 0.04em;
  /* Latin inside Persian text = 0.9× host size; these are the fixed Latin styles */
  --sr-text-latin-heading-size: 27px;   --sr-text-latin-heading-lh: 1.25;
  --sr-text-latin-body-size: 14.4px;    --sr-text-latin-body-lh: 1.9;
  --sr-text-latin-body-small-size: 12.6px; --sr-text-latin-body-small-lh: 1.85;
  --sr-text-latin-numeric-size: 16px;   --sr-text-latin-numeric-lh: 1.5;
  --sr-measure-body: 640px;   /* max line length ≈ 70 chars */
  --sr-measure-long: 760px;

  /* ---------- Spacing (base 4) ---------- */
  --sr-space-0: 0px;
  --sr-space-xs: 4px;
  --sr-space-sm: 8px;
  --sr-space-md: 16px;
  --sr-space-lg: 24px;
  --sr-space-xl: 32px;
  --sr-space-xxl: 48px;

  /* ---------- Radius (r ≈ 0.27 × short side; each token for a size range) ---------- */
  --sr-radius-none: 0px;
  --sr-radius-xxs: 3px;   /* 8–12px elements: dot, status band, swatch */
  --sr-radius-xs: 6px;    /* 20–24px: inner marks, handles, checkbox, badge */
  --sr-radius-sm: 10px;   /* 32–36px: chip, switch rail, day cell, pagination */
  --sr-radius-md: 12px;   /* 44px: button, input, icon button, menu */
  --sr-radius-lg: 20px;   /* 72–80px blocks, media frames */
  --sr-radius-xl: 28px;   /* card, modal, sheet */
  --sr-radius-full: 9999px; /* ONLY avatar and spinner */

  /* ---------- Sizing ---------- */
  --sr-size-icon: 24px;
  --sr-size-icon-lg: 32px;
  --sr-size-avatar: 40px;
  --sr-size-touch: 44px;   /* minimum interactive target */

  /* ---------- Border ---------- */
  --sr-border-hairline: 1px;
  --sr-border-strong: 2px;
  --sr-border-focus: 2px;
  --sr-border-focus-offset: 2px;

  /* ---------- Breakpoints (for reference; use in media queries) ---------- */
  --sr-breakpoint-sm: 390px;
  --sr-breakpoint-md: 834px;
  --sr-breakpoint-lg: 1440px;

  /* ---------- Z-index ---------- */
  --sr-z-base: 0;
  --sr-z-sticky: 100;
  --sr-z-overlay: 1000;
  --sr-z-modal: 1100;

  /* ---------- State layer opacities ---------- */
  --sr-state-none: 0;
  --sr-state-hover: 0.08;
  --sr-state-focus: 0.10;
  --sr-state-pressed: 0.10;
  --sr-state-dragged: 0.16;
  --sr-state-disabled-content: 0.38;
  --sr-state-disabled-container: 0.12;

  /* ---------- Motion ---------- */
  --sr-duration-instant: 80ms;   /* touch feedback, checkbox */
  --sr-duration-fast: 160ms;     /* hover, focus, colour change */
  --sr-duration-base: 240ms;     /* menu, accordion */
  --sr-duration-slow: 360ms;     /* sheet, modal, page transition */
  --sr-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --sr-easing-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);

  /* ---------- Elevation (shadows are RARE — surfaces separate by hairline + surface-container steps) ---------- */
  --sr-shadow-card: 0 1px 2px rgba(27, 42, 75, 0.04), 0 2px 8px rgba(27, 42, 75, 0.06);      /* white card on white; replaces hairline, never both */
  --sr-shadow-raised: 0 1px 3px rgba(27, 42, 75, 0.05), 0 4px 12px rgba(27, 42, 75, 0.08);   /* menu, dropdown, toast */
  --sr-shadow-overlay: 0 4px 8px rgba(27, 42, 75, 0.06), 0 12px 32px rgba(27, 42, 75, 0.14); /* modal, sheet (with scrim) */

  /* ---------- Layout grid ---------- */
  --sr-grid-sm-columns: 4;  --sr-grid-sm-gutter: 16px; --sr-grid-sm-margin: 20px;   /* 390 */
  --sr-grid-md-columns: 8;  --sr-grid-md-gutter: 24px; --sr-grid-md-margin: 40px;   /* 834 */
  --sr-grid-lg-columns: 12; --sr-grid-lg-gutter: 24px; --sr-grid-lg-margin: 80px;   /* 1440 */
  --sr-grid-baseline: 8px;

  color-scheme: light;
}

/* ---------- Dark theme ---------- */
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }


@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sr-color-error: var(--sr-error-80);
    --sr-color-on-error: var(--sr-navy-20);
    --sr-color-warning: var(--sr-amber-70);
    --sr-color-on-warning: var(--sr-navy-20);
    --sr-color-background: var(--sr-navy-10);
    --sr-color-on-background: var(--sr-neutral-100);
    --sr-color-surface: var(--sr-navy-10);
    --sr-color-on-surface: var(--sr-neutral-100);
    --sr-color-surface-variant: var(--sr-navy-30);
    --sr-color-on-surface-variant: var(--sr-neutral-90);
    --sr-color-surface-container-lowest: var(--sr-navy-10);
    --sr-color-surface-container-low: var(--sr-navy-10);
    --sr-color-surface-container: var(--sr-navy-20);
    --sr-color-surface-container-high: var(--sr-navy-30);
    --sr-color-surface-container-highest: var(--sr-navy-30);
    --sr-color-outline: var(--sr-navy-30);
    --sr-color-outline-variant: var(--sr-navy-20);
    --sr-color-inverse-surface: var(--sr-neutral-90);
    --sr-color-inverse-on-surface: var(--sr-navy-20);
    --sr-color-inverse-primary: var(--sr-green-70);
    --sr-color-scrim: var(--sr-navy-10);
    --sr-color-focus-ring: var(--sr-neutral-100);
    --sr-color-session-scheduled-main: var(--sr-neutral-90);
    --sr-color-session-scheduled-text: var(--sr-neutral-100);
    --sr-color-session-scheduled-band: var(--sr-neutral-90);
    --sr-color-session-live-text: var(--sr-neutral-100);
    --sr-color-session-cancelled-text: var(--sr-error-80);
    --sr-color-session-cancelled-band: var(--sr-error-80);
    --sr-color-session-missed-main: var(--sr-amber-70);
    --sr-color-session-missed-text: var(--sr-neutral-100);
    --sr-color-session-missed-band: var(--sr-amber-70);
    --sr-color-availability-limited: var(--sr-amber-70);
    --sr-color-chart-series-2: var(--sr-neutral-90);
    --sr-color-chart-grid: var(--sr-navy-30);
  }
}
:root[data-theme="dark"] {
  --sr-color-error: var(--sr-error-80);
  --sr-color-on-error: var(--sr-navy-20);
  --sr-color-warning: var(--sr-amber-70);
  --sr-color-on-warning: var(--sr-navy-20);
  --sr-color-background: var(--sr-navy-10);
  --sr-color-on-background: var(--sr-neutral-100);
  --sr-color-surface: var(--sr-navy-10);
  --sr-color-on-surface: var(--sr-neutral-100);
  --sr-color-surface-variant: var(--sr-navy-30);
  --sr-color-on-surface-variant: var(--sr-neutral-90);
  --sr-color-surface-container-lowest: var(--sr-navy-10);
  --sr-color-surface-container-low: var(--sr-navy-10);
  --sr-color-surface-container: var(--sr-navy-20);
  --sr-color-surface-container-high: var(--sr-navy-30);
  --sr-color-surface-container-highest: var(--sr-navy-30);
  --sr-color-outline: var(--sr-navy-30);
  --sr-color-outline-variant: var(--sr-navy-20);
  --sr-color-inverse-surface: var(--sr-neutral-90);
  --sr-color-inverse-on-surface: var(--sr-navy-20);
  --sr-color-inverse-primary: var(--sr-green-70);
  --sr-color-scrim: var(--sr-navy-10);
  --sr-color-focus-ring: var(--sr-neutral-100);
  --sr-color-session-scheduled-main: var(--sr-neutral-90);
  --sr-color-session-scheduled-text: var(--sr-neutral-100);
  --sr-color-session-scheduled-band: var(--sr-neutral-90);
  --sr-color-session-live-text: var(--sr-neutral-100);
  --sr-color-session-cancelled-text: var(--sr-error-80);
  --sr-color-session-cancelled-band: var(--sr-error-80);
  --sr-color-session-missed-main: var(--sr-amber-70);
  --sr-color-session-missed-text: var(--sr-neutral-100);
  --sr-color-session-missed-band: var(--sr-amber-70);
  --sr-color-availability-limited: var(--sr-amber-70);
  --sr-color-chart-series-2: var(--sr-neutral-90);
  --sr-color-chart-grid: var(--sr-navy-30);
}

/* ---------- Mobile typography (< 834px) ---------- */
@media (max-width: 833px) {
  :root {
    --sr-text-display-large-size: 40px;   --sr-text-display-large-lh: 46px;
    --sr-text-display-medium-size: 34px;  --sr-text-display-medium-lh: 40.1px;
    --sr-text-display-small-size: 30px;   --sr-text-display-small-lh: 36px;
    --sr-text-headline-large-size: 27px;  --sr-text-headline-large-lh: 33.8px;
    --sr-text-headline-medium-size: 24px; --sr-text-headline-medium-lh: 31.2px;
    --sr-text-headline-small-size: 21px;  --sr-text-headline-small-lh: 28.1px;
    --sr-text-title-large-size: 20px;     --sr-text-title-large-lh: 28.4px;
    --sr-text-title-medium-size: 17px;    --sr-text-title-medium-lh: 25px;
    --sr-text-body-large-size: 17px;      --sr-text-body-large-lh: 32.3px;
  }
}

/* ---------- Base ---------- */
.sr-root, body.sr {
  font-family: var(--sr-font-family);
  background: var(--sr-color-background);
  color: var(--sr-color-on-background);
  direction: rtl;
  text-align: right;              /* never justify */
  font-feature-settings: "ss01";  /* Persian digits where the font supports it */
}

/* ---------- Text style utility classes (family + size + lh + weight) ---------- */
.sr-display-large   { font: var(--sr-font-weight-medium) var(--sr-text-display-large-size)/var(--sr-text-display-large-lh) var(--sr-font-family); }
.sr-display-medium  { font: var(--sr-font-weight-medium) var(--sr-text-display-medium-size)/var(--sr-text-display-medium-lh) var(--sr-font-family); }
.sr-display-small   { font: var(--sr-font-weight-medium) var(--sr-text-display-small-size)/var(--sr-text-display-small-lh) var(--sr-font-family); }
.sr-headline-large  { font: var(--sr-font-weight-medium) var(--sr-text-headline-large-size)/var(--sr-text-headline-large-lh) var(--sr-font-family); }
.sr-headline-medium { font: var(--sr-font-weight-medium) var(--sr-text-headline-medium-size)/var(--sr-text-headline-medium-lh) var(--sr-font-family); }
.sr-headline-small  { font: var(--sr-font-weight-medium) var(--sr-text-headline-small-size)/var(--sr-text-headline-small-lh) var(--sr-font-family); }
.sr-title-large     { font: var(--sr-font-weight-medium) var(--sr-text-title-large-size)/var(--sr-text-title-large-lh) var(--sr-font-family); }
.sr-title-medium    { font: var(--sr-font-weight-medium) var(--sr-text-title-medium-size)/var(--sr-text-title-medium-lh) var(--sr-font-family); }
.sr-title-small     { font: var(--sr-font-weight-semibold) var(--sr-text-title-small-size)/var(--sr-text-title-small-lh) var(--sr-font-family); }
.sr-body-large      { font: var(--sr-font-weight-regular) var(--sr-text-body-large-size)/var(--sr-text-body-large-lh) var(--sr-font-family); }
.sr-body-medium     { font: var(--sr-font-weight-regular) var(--sr-text-body-medium-size)/var(--sr-text-body-medium-lh) var(--sr-font-family); }
.sr-body-small      { font: var(--sr-font-weight-regular) var(--sr-text-body-small-size)/var(--sr-text-body-small-lh) var(--sr-font-family); }
.sr-label-large     { font: var(--sr-font-weight-medium) var(--sr-text-label-large-size)/var(--sr-text-label-large-lh) var(--sr-font-family); }
.sr-label-medium    { font: var(--sr-font-weight-medium) var(--sr-text-label-medium-size)/var(--sr-text-label-medium-lh) var(--sr-font-family); }
.sr-label-small     { font: var(--sr-font-weight-medium) var(--sr-text-label-small-size)/var(--sr-text-label-small-lh) var(--sr-font-family); letter-spacing: var(--sr-text-label-small-ls); }
.sr-latin-heading   { font: var(--sr-font-weight-medium) var(--sr-text-latin-heading-size)/var(--sr-text-latin-heading-lh) var(--sr-font-family); direction: ltr; }
.sr-latin-body      { font: var(--sr-font-weight-regular) var(--sr-text-latin-body-size)/var(--sr-text-latin-body-lh) var(--sr-font-family); direction: ltr; }
.sr-latin-numeric   { font: var(--sr-font-weight-regular) var(--sr-text-latin-numeric-size)/var(--sr-text-latin-numeric-lh) var(--sr-font-family); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: embed; }

/* ---------- Focus (keyboard) — never colour-only ---------- */
.sr-focus:focus-visible, .sr-root :focus-visible {
  outline: var(--sr-border-focus) solid var(--sr-color-focus-ring);
  outline-offset: var(--sr-border-focus-offset);
}