/* ============================================================
   Asko Opening — Design Tokens
   Mobile B2B app for systematically opening new branches across
   Uzbekistan. Professional, calm, informative. Light + dark themes.
   Spacing is a 4pt grid; radii 12px (cards/buttons/fields), pills.
   ============================================================ */

:root {
  /* ---- Type ----------------------------------------------- */
  /* Native system stack (iOS San Francisco / Android Roboto).
     Falls back to a clean neutral grotesk on the web. */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Tabular numerals for stats / money / counters. */
  --font-num: "SF Mono", ui-monospace, "Roboto Mono", "Menlo", monospace;

  /* Type scale (mobile, px). Body never below 14; stats can go large. */
  --fs-display: 34px;   /* hero stat numbers      */
  --fs-h1: 24px;        /* screen titles          */
  --fs-h2: 20px;        /* section headers        */
  --fs-h3: 17px;        /* card titles            */
  --fs-body: 15px;      /* default body           */
  --fs-callout: 14px;   /* secondary body         */
  --fs-caption: 13px;   /* meta, labels           */
  --fs-micro: 11px;     /* chips, overlines       */

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.45;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --tracking-overline: 0.06em;

  /* ---- Spacing (4pt grid) --------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* ---- Radii ---------------------------------------------- */
  --r-sm: 8px;
  --r-md: 12px;   /* default: cards, buttons, inputs */
  --r-lg: 16px;
  --r-pill: 999px;

  /* ---- Control sizing ------------------------------------- */
  --control-h: 44px;     /* inputs, buttons, min hit target */
  --tabbar-h: 56px;
  --header-h: 52px;

  /* ---- Z ----------------------------------------------- */
  --z-header: 10;
  --z-tabbar: 20;
  --z-sheet: 40;
  --z-toast: 60;
}

/* ============================================================
   LIGHT THEME (default) — brand palette from the web product
   ============================================================ */
:root,
[data-theme="light"] {
  --primary: #1e4db7;        /* main accent, buttons, active */
  --primary-hover: #1a44a3;
  --primary-press: #163a8c;
  --primary-light: #e8edfb;  /* accent plate background */
  --accent: #1a9bfc;         /* links, secondary accent */
  --accent-soft: #e6f3ff;

  --heading: #11142d;        /* headings */
  --text: #2a3547;           /* primary body text */
  --text-muted: #67757c;     /* captions, meta */

  --surface: #fafafa;        /* screen background */
  --surface-card: #ffffff;   /* cards */
  --surface-raised: #ffffff; /* sheets, menus */
  --surface-input: #ffffff;  /* fields */
  --surface-sunken: #f2f4f7; /* skeletons, wells */

  --border: #dbdbdb;         /* dividers, frames */
  --border-strong: #c4c9cf;

  --success: #13deb9;
  --success-bg: #e6fbf6;
  --warning: #ffae1f;
  --warning-bg: #fff5e3;
  --danger: #fa896b;
  --danger-bg: #ffefea;
  --info: #539bff;
  --info-bg: #eaf2ff;

  /* On-color text (for filled chips/buttons) */
  --on-primary: #ffffff;
  --on-success: #07523f;
  --on-warning: #6b4500;
  --on-danger: #7a2a14;

  /* Soft elevation — barely-there shadows in light mode */
  --shadow-sm: 0 1px 2px rgba(17, 20, 45, 0.06);
  --shadow-md: 0 2px 8px rgba(17, 20, 45, 0.08);
  --shadow-lg: 0 8px 24px rgba(17, 20, 45, 0.12);
  --focus-ring: 0 0 0 3px rgba(30, 77, 183, 0.18);
}

/* ============================================================
   DARK THEME — separation by surface, not shadow.
   Accent (#1a9bfc) leads, not the saturated primary.
   ============================================================ */
[data-theme="dark"] {
  --primary: #1a9bfc;        /* accent leads in dark */
  --primary-hover: #3aa9fd;
  --primary-press: #1483dc;
  --primary-light: #0f3460;  /* accent plate background */
  --accent: #1a9bfc;
  --accent-soft: #143052;

  --heading: #ffffff;
  --text: #e0e0e0;
  --text-muted: #94a3b8;

  --surface: #1a1a2e;        /* screen background */
  --surface-card: #16213e;   /* cards */
  --surface-raised: #0f3460; /* raised surfaces, sheets */
  --surface-input: #1e293b;  /* fields */
  --surface-sunken: #14203a; /* skeletons, wells */

  --border: #2d3748;
  --border-strong: #3a4a63;

  --success: #13deb9;
  --success-bg: #0e2f30;
  --warning: #ffae1f;
  --warning-bg: #332708;
  --danger: #fa896b;
  --danger-bg: #3a201a;
  --info: #539bff;
  --info-bg: #16264a;

  --on-primary: #06243f;
  --on-success: #062d24;
  --on-warning: #2a1c00;
  --on-danger: #2a0f08;

  /* In dark mode shadows are subtle; rely on surface steps */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
  --focus-ring: 0 0 0 3px rgba(26, 155, 252, 0.30);
}

/* ============================================================
   SEMANTIC TEXT ELEMENTS
   ============================================================ */
.t-display {
  font: var(--fw-bold) var(--fs-display) / var(--lh-tight) var(--font-sans);
  color: var(--heading);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.t-h1 {
  font: var(--fw-bold) var(--fs-h1) / var(--lh-tight) var(--font-sans);
  color: var(--heading);
  letter-spacing: -0.01em;
}
.t-h2 {
  font: var(--fw-semibold) var(--fs-h2) / var(--lh-snug) var(--font-sans);
  color: var(--heading);
}
.t-h3 {
  font: var(--fw-semibold) var(--fs-h3) / var(--lh-snug) var(--font-sans);
  color: var(--heading);
}
.t-body {
  font: var(--fw-regular) var(--fs-body) / var(--lh-body) var(--font-sans);
  color: var(--text);
}
.t-callout {
  font: var(--fw-regular) var(--fs-callout) / var(--lh-body) var(--font-sans);
  color: var(--text);
}
.t-caption {
  font: var(--fw-regular) var(--fs-caption) / var(--lh-snug) var(--font-sans);
  color: var(--text-muted);
}
.t-overline {
  font: var(--fw-semibold) var(--fs-micro) / 1 var(--font-sans);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-overline);
}
.t-num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}