/* ─────────────────────────────────────────────────────────────
   Enabill Flexible Design System — Colors & Type
   A neutral foundation that lets each restaurant overlay its own
   brand color while preserving Enabill's product structure.
   ───────────────────────────────────────────────────────────── */

/* Webfonts ---------------------------------------------------- */
/* Latin: Poppins (UI), Manrope (numbers + buttons), Sora (body) */
/* Arabic / RTL: Tajawal — bundled from fonts/ */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=Sora:wght@300;400;500;600;700;800&display=swap");

@font-face { font-family: "Tajawal"; font-weight: 200; font-style: normal; font-display: swap;
  src: url("Tajawal-ExtraLight.ttf") format("truetype"); }
@font-face { font-family: "Tajawal"; font-weight: 300; font-style: normal; font-display: swap;
  src: url("Tajawal-Light.ttf") format("truetype"); }
@font-face { font-family: "Tajawal"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("Tajawal-Regular.ttf") format("truetype"); }
@font-face { font-family: "Tajawal"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("Tajawal-Medium.ttf") format("truetype"); }
@font-face { font-family: "Tajawal"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("Tajawal-Bold.ttf") format("truetype"); }
@font-face { font-family: "Tajawal"; font-weight: 800; font-style: normal; font-display: swap;
  src: url("Tajawal-ExtraBold.ttf") format("truetype"); }
@font-face { font-family: "Tajawal"; font-weight: 900; font-style: normal; font-display: swap;
  src: url("Tajawal-Black.ttf") format("truetype"); }

:root {
  /* ── Brand (Enabill primary) ─────────────────────────────── */
  --enabill-coral:     rgb(235, 91, 94);    /* #EB5B5E — primary */
  --enabill-coral-2:   rgb(255, 89, 90);    /* #FF595A — accent  */
  --enabill-coral-50:  rgb(255, 246, 247);  /* #FFF6F7 — tinted bg */
  --enabill-coral-700: rgb(187, 53, 56);    /* pressed / dark    */
  --enabill-amber:     rgb(255, 186, 0);    /* loyalty highlight */

  /* ── Neutrals (the foundation) ───────────────────────────── */
  --ink-900: rgb(0, 0, 0);
  --ink-800: rgb(23, 25, 35);     /* #171923 — display heading */
  --ink-700: rgb(34, 40, 47);     /* #22282F — body strong     */
  --ink-600: rgb(46, 48, 57);     /* #2E3039 — body            */
  --ink-500: rgb(93, 94, 101);    /* secondary text            */
  --ink-400: rgb(115, 111, 107);  /* muted text                */
  --ink-300: rgb(163, 163, 171);  /* placeholder               */
  --ink-200: rgb(209, 209, 211);  /* hairline / divider strong */
  --line-1:  rgb(231, 234, 242);  /* input border              */
  --line-2:  rgb(238, 238, 238);  /* default border            */
  --surface-3: rgb(229, 229, 229);
  --surface-2: rgb(244, 244, 244);
  --surface-1: rgb(250, 250, 250);
  --surface-0: rgb(255, 255, 255);

  /* ── Semantic foreground / background ────────────────────── */
  --fg-1: var(--ink-700);     /* default body */
  --fg-2: var(--ink-500);     /* secondary    */
  --fg-3: var(--ink-300);     /* tertiary / placeholder */
  --fg-inverse: var(--surface-0);

  --bg-app:    var(--surface-0);
  --bg-muted:  var(--surface-1);
  --bg-sunken: var(--surface-2);
  --bg-overlay-dark: rgba(0, 0, 0, 0.64);

  /* ── Status / semantic ───────────────────────────────────── */
  --success: rgb(34, 161, 92);
  --warning: rgb(255, 186, 0);
  --danger:  rgb(235, 91, 94);
  --info:    rgb(72, 62, 85);

  /* ── Restaurant theme tokens (overridable per-tenant) ────── */
  /* Default theme = Enabill coral. A restaurant overrides these
     three vars with its own brand color and the rest of the
     system reflows around it. */
  --brand:        var(--enabill-coral);
  --brand-strong: var(--enabill-coral-700);
  --brand-tint:   var(--enabill-coral-50);
  --brand-on:     #ffffff;     /* foreground on top of --brand */

  /* ── Spacing scale (4px base) ────────────────────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* ── Radius (cards are gently rounded; buttons firmer) ───── */
  --r-xs: 6px;     /* menu image, list rows                    */
  --r-sm: 8px;     /* small chips, tab pills                   */
  --r-md: 10px;    /* secondary buttons, language switch       */
  --r-lg: 12px;    /* primary buttons, inputs, cards           */
  --r-xl: 20px;    /* hero panels                              */
  --r-2xl: 24px;
  --r-pill: 9999px;

  /* ── Elevation (Enabill uses very subtle layered shadows) ── */
  --shadow-1: 0 1px 2px 0 rgba(17, 25, 39, 0.03),
              0 1px 3px 0 rgba(17, 25, 39, 0.06);
  --shadow-2: 0 4px 12px 0 rgba(17, 25, 39, 0.08);
  --shadow-3: 0 10px 24px 0 rgba(17, 25, 39, 0.12);
  --shadow-press: 0 0 0 0 rgba(17, 25, 39, 0);

  /* ── Type families ───────────────────────────────────────── */
  --font-display: "Poppins", "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Sora",    "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-numeric: "Manrope", "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-arabic:  "Tajawal", system-ui, sans-serif;

  /* ── Type scale (mobile-first, used across all screens) ── */
  --t-display-size: 40px;  --t-display-weight: 700;  --t-display-lh: 100%;
  --t-h1-size: 24px;       --t-h1-weight: 700;       --t-h1-lh: 110%;
  --t-h2-size: 18px;       --t-h2-weight: 700;       --t-h2-lh: 120%;
  --t-h3-size: 16px;       --t-h3-weight: 600;       --t-h3-lh: 120%;
  --t-body-size: 14px;     --t-body-weight: 400;     --t-body-lh: 150%;
  --t-body-strong: 500;
  --t-meta-size: 12px;     --t-meta-weight: 400;     --t-meta-lh: 140%;
  --t-button-size: 16px;   --t-button-weight: 700;   --t-button-lh: 100%;
  --t-overline-size: 10px; --t-overline-weight: 600; --t-overline-lh: 120%;

  /* ── Motion ──────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasis: cubic-bezier(0.3, 0, 0, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
}

/* ── Base resets (opt-in via .ena class on root) ───────────── */
.ena, .ena * { box-sizing: border-box; }
.ena {
  font-family: var(--font-body);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  color: var(--fg-1);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.ena[dir="rtl"], .ena .rtl { font-family: var(--font-arabic); }

/* ── Semantic type classes ─────────────────────────────────── */
.ena h1, .ena .t-h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1-size);
  font-weight: var(--t-h1-weight);
  line-height: var(--t-h1-lh);
  letter-spacing: -0.01em;
  color: var(--ink-800);
  margin: 0;
}
.ena h2, .ena .t-h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2-size);
  font-weight: var(--t-h2-weight);
  line-height: var(--t-h2-lh);
  letter-spacing: -0.01em;
  color: var(--ink-700);
  margin: 0;
}
.ena h3, .ena .t-h3 {
  font-family: var(--font-display);
  font-size: var(--t-h3-size);
  font-weight: var(--t-h3-weight);
  line-height: var(--t-h3-lh);
  color: var(--ink-700);
  margin: 0;
}
.ena .t-display {
  font-family: var(--font-display);
  font-size: var(--t-display-size);
  font-weight: var(--t-display-weight);
  line-height: var(--t-display-lh);
  letter-spacing: -0.02em;
  color: var(--ink-800);
}
.ena p, .ena .t-body {
  font-family: var(--font-body);
  font-size: var(--t-body-size);
  font-weight: var(--t-body-weight);
  line-height: var(--t-body-lh);
  color: var(--fg-1);
  margin: 0;
}
.ena .t-meta {
  font-family: var(--font-body);
  font-size: var(--t-meta-size);
  font-weight: var(--t-meta-weight);
  line-height: var(--t-meta-lh);
  color: var(--fg-2);
}
.ena .t-overline {
  font-family: var(--font-display);
  font-size: var(--t-overline-size);
  font-weight: var(--t-overline-weight);
  line-height: var(--t-overline-lh);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.ena .t-button {
  font-family: var(--font-numeric);
  font-size: var(--t-button-size);
  font-weight: var(--t-button-weight);
  line-height: var(--t-button-lh);
}
.ena .t-num {
  font-family: var(--font-numeric);
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ── Utility ───────────────────────────────────────────────── */
.ena .surface     { background: var(--surface-0); }
.ena .surface-1   { background: var(--surface-1); }
.ena .surface-2   { background: var(--surface-2); }
.ena .hairline    { border: 1px solid var(--line-2); }
.ena .hairline-soft { border: 1px solid rgba(0,0,0,0.08); }
.ena .card        { background: var(--surface-0); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.ena .card-flat   { background: var(--surface-0); border-radius: var(--r-lg); border: 1px solid var(--line-2); }