/* =====================================================================
   tokens.css — the design system's single source of truth.
   Colour, spacing, radius, elevation, type scale, motion.

   Light is defined on bare :root so a colour always has a definition
   outside a media query. Dark is re-declared twice: once for the system
   preference (guarded so an explicit light choice wins) and once for an
   explicit data-theme="dark".
   ===================================================================== */

/*
 * **Why `--c-info` and `--c-focus` are cyan and not blue.**
 *
 * They were both #1a5fd0, a strong blue, which sat 204° of hue away from the
 * old orange brand and was unmistakable beside it. Against the indigo-violet
 * brand it is 30° away — measured ΔE 23 in light, 36 in dark, down from 121
 * and 113. That is not a matter of taste: `.pagerbtn--set` (info) sits in the
 * same head row as the order number, and `.otab--new` (brand) sits at the
 * same 38px as every other tab beside it — each is meant to read as brand
 * versus neutral-info against controls of its own shape, not as one pair
 * with each other. `.badge--info` sits in the same row as `.badge--brand`
 * for the same reason. Two identically-shaped adjacent controls separated by
 * 30° of hue is a cashier pressing the wrong one.
 *
 * So the brand kept its ramp and the blue moved, which is the way round that
 * preserves the meaning: brand is identity, info is "this is a fact about the
 * system". Cyan puts them ΔE 82 (light) and 78 (dark) apart — not the 121 of
 * the orange days, but comfortably separable, including for the red-green
 * deficiencies where both indigo and blue collapse toward the same percept.
 *
 * The landing page's own cyan (#0E90B5) is **not** reused verbatim in light
 * mode: there it is a fill, here `--c-info` is *text* on `--c-info-soft`, and
 * #0E90B5 gives 3.28:1 against a pale tint — a fail. #10788C is the same hue
 * family at 4.55:1 on the soft and 5.14:1 on white. Dark mode does take the
 * landing page's #45CDEC as-is; on a dark tint it reads 8.37:1.
 *
 * `--c-focus` moves with `--c-info` rather than staying blue on its own. They
 * have always been one value here, and splitting them would put a third
 * blue-to-violet hue on screen beside the other two — worse than the problem
 * being solved. A focus ring drawn on or beside a brand-filled control at
 * ΔE 23 from that fill is the accessibility failure this avoids.
 *
 * ok / warn / danger are untouched: green, amber and red never collided with
 * orange and do not collide with indigo.
 */

:root {
  /* ---- palette: light ---------------------------------------------- */
  --c-bg:            #eef1f5;
  --c-bg-grad:       radial-gradient(1200px 600px at 90% -10%, #ffffff 0%, #eef1f5 60%);
  --c-surface:       #ffffff;
  --c-surface-2:     #f6f8fa;
  --c-surface-3:     #e9edf3;
  --c-ink:           #101620;
  --c-ink-2:         #3d4756;
  --c-dim:           #5c6878;
  --c-line:          #d9dfe8;
  --c-line-strong:   #bcc6d4;

  --c-brand:         #5B4BD6;
  --c-brand-ink:     #ffffff;
  --c-brand-soft:    #ECEAFB;
  --c-brand-strong:  #4438B0;

  --c-ok:            #12805c;
  --c-ok-soft:       #e2f5ee;
  --c-warn:          #9a6100;
  --c-warn-soft:     #fdf1dc;
  /* Cyan, not blue — see the note above the palette. */
  --c-info:          #10788C;
  --c-info-soft:     #E4F4F9;
  --c-danger:        #b3261e;
  --c-danger-soft:   #fdeceb;

  --c-focus:         #10788C;

  /* ---- elevation ---------------------------------------------------- */
  --sh-1: 0 1px 2px rgba(16, 22, 32, .06), 0 1px 1px rgba(16, 22, 32, .04);
  --sh-2: 0 2px 6px rgba(16, 22, 32, .08), 0 6px 16px rgba(16, 22, 32, .06);
  --sh-3: 0 10px 30px rgba(16, 22, 32, .14), 0 2px 8px rgba(16, 22, 32, .08);
  --sh-inset: inset 0 0 0 1px var(--c-line);

  /* ---- spacing (4px base) ------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;

  /* ---- radius ------------------------------------------------------- */
  --r-1: 8px;
  --r-2: 12px;
  --r-3: 16px;
  --r-4: 22px;
  --r-pill: 999px;

  /* ---- type scale ---------------------------------------------------
     Deliberately large: this is read at arm's length, standing up,
     under fluorescent shop lighting. Nothing below 14px, nothing thin. */
  --f-sans: "Vazirmatn", "IRANSans", "IRANYekan", "Sahel", "Segoe UI", Tahoma, Arial, sans-serif;
  --t-xs:   0.8125rem;  /* 13 — badges only */
  --t-sm:   0.9375rem;  /* 15 */
  --t-md:   1.0625rem;  /* 17 — body */
  --t-lg:   1.25rem;    /* 20 */
  --t-xl:   1.5rem;     /* 24 */
  --t-2xl:  2rem;       /* 32 */
  --t-3xl:  2.75rem;    /* 44 — grand total, order number */

  --w-normal: 400;
  --w-medium: 500;
  --w-bold:   700;

  /* ---- geometry ------------------------------------------------------ */
  --tap:        56px;   /* minimum touch target */
  --tap-lg:     68px;
  /* The catalog was taking roughly three quarters of a desktop screen to show
     tiles that already fit, while the order side — where the cashier actually
     works — was pinned near its minimum. This hands the surplus back. One
     fluid expression rather than a token plus breakpoint overrides, so the
     proportion moves monotonically instead of stepping backwards at 1600px. */
  --panel-w:    clamp(400px, 32vw, 620px);
  --header-h:   64px;

  /* ---- motion -------------------------------------------------------- */
  --e-out: cubic-bezier(.2, .8, .3, 1);
  --d-1: 90ms;
  --d-2: 160ms;
  --d-3: 260ms;
}

/* system dark, unless the user explicitly chose light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg:          #0d1117;
    --c-bg-grad:     radial-gradient(1200px 600px at 90% -10%, #1a222e 0%, #0d1117 60%);
    --c-surface:     #161c25;
    --c-surface-2:   #1c242f;
    --c-surface-3:   #24303d;
    --c-ink:         #f0f4f9;
    --c-ink-2:       #c6d0dc;
    --c-dim:         #92a0b2;
    --c-line:        #2a3441;
    --c-line-strong: #3a4655;

    --c-brand:       #8E7BFF;
    --c-brand-ink:   #0F0A22;
    --c-brand-soft:  #1E1A38;
    --c-brand-strong:#A899FF;

    --c-ok:          #3ddc97;
    --c-ok-soft:     #14301f;
    --c-warn:        #f5b445;
    --c-warn-soft:   #33260f;
    --c-info:        #45CDEC;
    --c-info-soft:   #0D2630;
    --c-danger:      #ff7369;
    --c-danger-soft: #3a1a19;

    --c-focus:       #45CDEC;

    --sh-1: 0 1px 2px rgba(0, 0, 0, .5);
    --sh-2: 0 2px 6px rgba(0, 0, 0, .45), 0 8px 20px rgba(0, 0, 0, .35);
    --sh-3: 0 14px 40px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .4);
  }
}

/* explicit dark choice always wins */
:root[data-theme="dark"] {
  --c-bg:          #0d1117;
  --c-bg-grad:     radial-gradient(1200px 600px at 90% -10%, #1a222e 0%, #0d1117 60%);
  --c-surface:     #161c25;
  --c-surface-2:   #1c242f;
  --c-surface-3:   #24303d;
  --c-ink:         #f0f4f9;
  --c-ink-2:       #c6d0dc;
  --c-dim:         #92a0b2;
  --c-line:        #2a3441;
  --c-line-strong: #3a4655;

  --c-brand:       #8E7BFF;
  --c-brand-ink:   #0F0A22;
  --c-brand-soft:  #1E1A38;
  --c-brand-strong:#A899FF;

  --c-ok:          #3ddc97;
  --c-ok-soft:     #14301f;
  --c-warn:        #f5b445;
  --c-warn-soft:   #33260f;
  --c-info:        #45CDEC;
  --c-info-soft:   #0D2630;
  --c-danger:      #ff7369;
  --c-danger-soft: #3a1a19;

  --c-focus:       #45CDEC;

  --sh-1: 0 1px 2px rgba(0, 0, 0, .5);
  --sh-2: 0 2px 6px rgba(0, 0, 0, .45), 0 8px 20px rgba(0, 0, 0, .35);
  --sh-3: 0 14px 40px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .4);
}