/*
 * Tillio Lite — pilot release hub
 * Brand tokens ported from tillio_website/web/app/globals.css @theme so this page
 * and tillio.me stay one system. Do not introduce raw hex in site.css — add a token.
 *
 * Mint is STATUS ONLY (current build / success). Never decorative.
 * Blue is the single action colour. One primary action per view.
 */

:root {
  /* ── Brand ───────────────────────────────────────────────────────────── */
  --navy: #071147;
  --blue: #0d63fe;
  --cyan: #01bafe;
  --mint: #15e7aa;

  /* ── Light surfaces & text ───────────────────────────────────────────── */
  --white: #ffffff;
  --surface: #f7f9fc;
  --surface-2: #eef3ff;
  --border: #e5eaf2;
  --border-strong: #d6deec;
  --text: #071147;
  --text-muted: #5f6b85;

  /* ── On-navy set ─────────────────────────────────────────────────────────
   * Measured against #071147. Muted is tinted from the navy hue, never gray.
   *   --on-navy          #ffffff  17.8:1
   *   --on-navy-muted    #8c9fcb   6.7:1
   *   --on-navy-faint    #64769f   3.4:1  — non-text / hairline labels only
   *   cyan  8.0:1 · mint 11.1:1 · blue 3.6:1 (fill only, never text on navy)
   */
  --on-navy: #ffffff;
  --on-navy-muted: #8c9fcb;
  --on-navy-faint: #64769f;
  --navy-raised: rgba(255, 255, 255, 0.045);
  --navy-raised-2: rgba(255, 255, 255, 0.075);
  --navy-hairline: rgba(255, 255, 255, 0.11);
  --navy-hairline-strong: rgba(255, 255, 255, 0.2);

  /* ── Status tints (light surfaces) ───────────────────────────────────────
   * *-ink values clear AA on their own tinted surface, which full-saturation
   * mint and cyan do not.
   */
  --mint-surface: #e3fbf2;
  --mint-ink: #067054;
  --blue-surface: #e9f1ff;
  --blue-ink: #0a51d4;
  --amber-surface: #fff4e0;
  --amber-ink: #8a5200;
  --danger: #d83a52;
  --danger-surface: #fdecef;
  --danger-ink: #b12440;

  /* Third-party brand mark. Glyph only — never a surface or a second accent. */
  --whatsapp: #25d366;

  /* ── Type ────────────────────────────────────────────────────────────── */
  --font-sans: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-arabic: 'IBM Plex Sans Arabic', ui-sans-serif, system-ui, -apple-system, sans-serif;
  /* Mono is for artefact data only — versions, filenames, byte sizes, SHA-256.
   * System stack: no extra request, and every target OS ships a good one. */
  --font-mono: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', 'SF Mono', Menlo,
    Consolas, 'Liberation Mono', monospace;

  --tracking-label: 0.12em;

  /* ── Radii ───────────────────────────────────────────────────────────── */
  --r-sm: 8px;
  --r-btn: 12px;
  --r-md: 14px;
  --r-card: 20px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* ── Depth — every shadow carries offset + blur ──────────────────────── */
  --shadow-sm: 0 1px 2px rgba(7, 17, 71, 0.05);
  --shadow-card: 0 4px 16px rgba(7, 17, 71, 0.08);
  --shadow-lg: 0 10px 32px rgba(7, 17, 71, 0.14);
  --shadow-blue: 0 3px 12px rgba(13, 99, 254, 0.34);
  --shadow-blue-hover: 0 6px 20px rgba(13, 99, 254, 0.42);
  --shadow-on-navy: 0 12px 36px rgba(0, 0, 0, 0.34);

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --page: 72rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --nav-h: 4rem;

  /* ── Motion — one grammar: exponential ease-out from a visible default ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur: 260ms;
  --dur-slow: 620ms;
}

/* Arabic swaps the Latin face only; every token above is direction-agnostic. */
:root[lang='ar'] {
  --font-sans: var(--font-arabic);
}