/* ══════════════════════════════════════════════════════════════════
   AT BELL — DESIGN TOKENS
   Single source of truth for the prototype AND the spec Flutter is
   built from.

   Extracted verbatim from the live app:
     atbell-mobile/lib/shared/theme/at_bell_colors.dart
     atbell-mobile/lib/shared/theme/at_bell_tokens.dart
     atbell-mobile/lib/shared/theme/at_bell_typography.dart

   RULE: no raw hex anywhere else in this prototype. If a value is
   missing, add it here first — that keeps this file usable as the
   handover spec.
   ══════════════════════════════════════════════════════════════════ */

/* ── Fonts (bundled in the app: Roboto latin, Tajawal arabic) ────── */
@font-face{font-family:'Roboto';font-weight:300;font-style:normal;font-display:swap;
  src:url('../fonts/Roboto-Light.ttf') format('truetype')}
@font-face{font-family:'Roboto';font-weight:400;font-style:normal;font-display:swap;
  src:url('../fonts/Roboto-Regular.ttf') format('truetype')}
@font-face{font-family:'Roboto';font-weight:500;font-style:normal;font-display:swap;
  src:url('../fonts/Roboto-Medium.ttf') format('truetype')}
@font-face{font-family:'Roboto';font-weight:700;font-style:normal;font-display:swap;
  src:url('../fonts/Roboto-Bold.ttf') format('truetype')}

:root{
  /* ── Brand palette (owner-confirmed 2026-06-13) ───────────────── */
  --primary:#EB5627;          /* coral-orange — main CTA          */
  --primary-alt:#F1A137;      /* amber                            */
  --secondary:#131C3B;        /* deep navy — dark surfaces/heads  */
  --secondary-alt:#F7CF46;    /* yellow                           */
  --accent:#90D0C1;           /* mint                             */
  --accent-blue:#5EA0D7;      /* blue                             */

  /* ── Neutrals ─────────────────────────────────────────────────── */
  --almost-black:#100F0D;
  --white:#FFFFFF;
  --warm-off-white:#FAF7F2;
  --field-border:#D0D2D8;     /* color/surface/borders/secondary/100 */
  --text-muted:#A1A4B1;       /* color/text/headings/200             */
  --text-faint:#D0D2D8;       /* color/text/headings/100             */
  --chip-label:#6B7280;
  --ink:#1A1A1A;
  --ink-muted:#737373;
  --neutral-100:#DFECF7;
  --text-secondary:rgba(16,15,13,.6);
  --hairline:#EFEDE7;         /* card borders / dividers             */
  --hairline-soft:#F3F1EB;

  /* ── Tinted surfaces (At bell5 Figma, node 216:7889) ──────────── */
  --icon-circle:#FAFAF8;      /* category icon plate   */
  --promo-peach:#FEDFCE;      /* promo banner          */
  --plan-mint:#F1F7ED;        /* subscription banner   */
  --order-strip:#F7F4ED;      /* order-tracking strip  */

  /* ── Semantic (derived from brand — no new hex) ───────────────── */
  --ok-bg:rgba(144,208,193,.26);   --ok-fg:#0E6B57;
  --info-bg:rgba(94,160,215,.10);  --info-fg:#245A85;  --info-br:rgba(94,160,215,.25);
  --warn-bg:#FEDFCE;               --warn-fg:#8A3A14;  --warn-br:#F8CFB4;
  --danger-fg:#C0341A;             --danger-bg:rgba(192,52,26,.08);

  /* ── Spacing — Figma sizes/spaces/sp-* ────────────────────────── */
  --sp4:4px;  --sp6:6px;  --sp8:8px;  --sp12:12px; --sp14:14px;
  --sp16:16px; --sp18:18px; --sp22:22px; --sp24:24px; --sp28:28px;
  --sp32:32px; --sp40:40px;

  /* ── Radii — Figma sizes/radius/rd-* ──────────────────────────── */
  --rd12:12px; --rd16:16px; --rd24:24px; --rd40:40px; --rd-pill:200px;

  /* ── Type scale (at_bell_typography.dart) ─────────────────────── */
  --font:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --fs-hero:32px;   --lh-hero:40px;   --fw-hero:300;
  --fs-h1:24px;     --lh-h1:32px;     --fw-h1:300;
  --fs-h2:20px;     --lh-h2:28px;     --fw-h2:400;
  --fs-h3:18px;     --lh-h3:24px;     --fw-h3:500;
  --fs-body-lg:16px;--lh-body-lg:24px;
  --fs-body:14px;   --lh-body:20px;
  --fs-caption:12px;--lh-caption:16px;
  --fs-micro:11px;  --lh-micro:15px;

  /* ── Elevation ────────────────────────────────────────────────── */
  --sh-primary:0 8px 18px rgba(201,15,15,.28);  /* under the orange pill */
  --sh-dark:0 8px 18px rgba(19,28,59,.24);
  --sh-card:0 1px 2px rgba(19,28,59,.04);
  --sh-sheet:0 -8px 30px rgba(19,28,59,.14);
  --sh-float:0 12px 26px rgba(19,28,59,.32);

  /* ── Motion ───────────────────────────────────────────────────── */
  --dur-fast:120ms; --dur:180ms; --dur-sheet:220ms;
  --ease:cubic-bezier(.2,.8,.3,1);

  /* ── Layout ───────────────────────────────────────────────────── */
  --screen-pad:18px;
  --tap-min:44px;             /* minimum touch target */
}