/* GENERATED from design-system/css/tokens.css by scripts/sync-landing-tokens.sh.
   Do not edit: change the source and re-run the script. */

/* ============================================================
   Bookara design tokens: the single source of truth for every app
   (admin, master, mini, payment, start, owner) and the landing site.
   Edit values HERE, never in an app's own styles.css. The narrative
   spec ("why") lives in DESIGN.md; scripts/check-design-tokens.ts fails
   if the two disagree on a hex.

   landing/ has no build step, so it gets a generated copy of this file
   (scripts/sync-landing-tokens.sh). Never edit that copy.

   Dark mode is keyed two ways so it works with and without JS:
   - :root[data-theme="dark"]: set at runtime by src/useTheme.ts
     (stored override -> Telegram.WebApp.colorScheme -> OS preference).
   - @media (prefers-color-scheme: dark) :root:not([data-theme="light"]):
     first paint before JS runs, and a plain browser tab with no override.
   ============================================================ */

:root {
  /* ---------- Type ---------- */
  --font-display: "Manrope", "Noto Sans Armenian", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: "Manrope", "Noto Sans Armenian", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Numerals only: times, prices, durations, codes (The Digits-Only-Mono Rule). */
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* ---------- Surfaces ---------- */
  --cloud: #f8f9fb;
  --paper: #ffffff;
  --pebble: #f0f3f8;

  /* ---------- Text ---------- */
  --ink-navy: #0b3558;
  --slate-gray: #476788;
  /* Decorative only (dividers, chevrons). Never text: 1.87:1 on --cloud.
     Use --slate-gray for captions. */
  --mist-gray: #a6bbd1;
  --text-faint: rgba(11, 53, 88, 0.4);

  /* ---------- Lines ---------- */
  --hairline: #d4e0ed;
  --hairline-strong: rgba(71, 103, 136, 0.28);
  /* Softer than --hairline, for in-card row dividers. */
  --line: rgba(71, 103, 136, 0.14);

  /* ---------- Accent (The One Blue Rule) ---------- */
  /* Foreground use: text, icons, borders, focus ring, selection. */
  --signal-blue: #006bff;
  --signal-blue-strong: #2e86ff;
  --deep-cobalt: #004eba;
  --tint-bg: #e6f0ff;
  /* Solid fills that carry --on-accent text (primary buttons, active
     pills, badges). Separate from --signal-blue because dark mode needs a
     deeper fill for white text to clear 4.5:1. */
  --action-bg: #006bff;
  --action-bg-hover: #0059d6;
  --on-accent: #ffffff;

  /* ---------- Signal ---------- */
  --pine: #1f9d63;
  --rust: #d1442f;

  --scrim: rgba(11, 53, 88, 0.78);

  /* ---------- Shape ---------- */
  --radius-control: 8px;
  --radius-card: 14px;
  --radius-card-lg: 16px;
  --radius-sheet: 24px;
  --radius-pill: 999px;

  /* ---------- Spacing ---------- */
  --space-xs: 6px;
  --space-sm: 10px;
  --space-md: 14px;
  --space-lg: 20px;
  --space-xl: 24px;

  /* ---------- Elevation (The Tinted-Shadow Rule) ---------- */
  --shadow-tint: 71, 103, 136;
  --shadow-sm: rgba(71, 103, 136, 0.04) 0px 4px 5px 0px, rgba(71, 103, 136, 0.03) 0px 4px 10px 0px, rgba(71, 103, 136, 0.05) 0px 10px 20px 0px;
  --shadow-card: rgba(71, 103, 136, 0.04) 0px 4px 5px 0px, rgba(71, 103, 136, 0.03) 0px 8px 15px 0px, rgba(71, 103, 136, 0.08) 0px 30px 50px 0px;
  --shadow-button: rgba(71, 103, 136, 0.04) 0px 4px 5px 0px, rgba(71, 103, 136, 0.03) 0px 8px 15px 0px, rgba(71, 103, 136, 0.06) 0px 15px 30px 0px;

  color-scheme: light;
}

/* The dark palette, written once. Both selectors below must stay
   identical: the media-query copy covers first paint and plain browser
   tabs, the attribute copy covers the runtime/manual choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cloud: #0a121c;
    --paper: #101b28;
    --pebble: #16232f;

    --ink-navy: #e8eef7;
    --slate-gray: #9fb2c9;
    --mist-gray: #64788f;
    --text-faint: rgba(232, 238, 247, 0.42);

    --hairline: #223140;
    --hairline-strong: rgba(166, 187, 209, 0.34);
    --line: rgba(159, 178, 201, 0.16);

    /* #2f8cff clears 4.5:1 as text on every dark surface (4.8-5.7:1). */
    --signal-blue: #2f8cff;
    --signal-blue-strong: #4d9bff;
    --deep-cobalt: #7ab8ff;
    --tint-bg: #123156;
    /* White on #2f8cff is only 3.3:1, so fills go deeper: 4.78:1. */
    --action-bg: #1a6fe0;
    --action-bg-hover: #0f57ad;

    --pine: #3ecf8e;
    --rust: #ff6b52;

    --scrim: rgba(3, 12, 24, 0.82);

    --shadow-tint: 0, 0, 0;
    --shadow-sm: rgba(0, 0, 0, 0.25) 0px 4px 5px 0px, rgba(0, 0, 0, 0.2) 0px 4px 10px 0px, rgba(0, 0, 0, 0.3) 0px 10px 20px 0px;
    --shadow-card: rgba(0, 0, 0, 0.3) 0px 4px 5px 0px, rgba(0, 0, 0, 0.25) 0px 8px 15px 0px, rgba(0, 0, 0, 0.45) 0px 30px 50px 0px;
    --shadow-button: rgba(0, 0, 0, 0.3) 0px 4px 5px 0px, rgba(0, 0, 0, 0.25) 0px 8px 15px 0px, rgba(0, 0, 0, 0.35) 0px 15px 30px 0px;

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --cloud: #0a121c;
  --paper: #101b28;
  --pebble: #16232f;

  --ink-navy: #e8eef7;
  --slate-gray: #9fb2c9;
  --mist-gray: #64788f;
  --text-faint: rgba(232, 238, 247, 0.42);

  --hairline: #223140;
  --hairline-strong: rgba(166, 187, 209, 0.34);
  --line: rgba(159, 178, 201, 0.16);

  --signal-blue: #2f8cff;
  --signal-blue-strong: #4d9bff;
  --deep-cobalt: #7ab8ff;
  --tint-bg: #123156;
  --action-bg: #1a6fe0;
  --action-bg-hover: #0f57ad;

  --pine: #3ecf8e;
  --rust: #ff6b52;

  --scrim: rgba(3, 12, 24, 0.82);

  --shadow-tint: 0, 0, 0;
  --shadow-sm: rgba(0, 0, 0, 0.25) 0px 4px 5px 0px, rgba(0, 0, 0, 0.2) 0px 4px 10px 0px, rgba(0, 0, 0, 0.3) 0px 10px 20px 0px;
  --shadow-card: rgba(0, 0, 0, 0.3) 0px 4px 5px 0px, rgba(0, 0, 0, 0.25) 0px 8px 15px 0px, rgba(0, 0, 0, 0.45) 0px 30px 50px 0px;
  --shadow-button: rgba(0, 0, 0, 0.3) 0px 4px 5px 0px, rgba(0, 0, 0, 0.25) 0px 8px 15px 0px, rgba(0, 0, 0, 0.35) 0px 15px 30px 0px;

  color-scheme: dark;
}