/* Tanzifco webfonts
   ---------------------------------------------------------------
   Cairo — friendly geometric sans, native Arabic + Latin support.
   Chosen for Gulf-region readability and painless RTL localization
   later. Loaded from Google Fonts; self-host the .woff2 binaries for
   production / offline use and replace the @import below with
   @font-face rules pointing at the local files. */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap');

/* Numeric/price contexts use Cairo with tabular figures (see
   typography.css → --font-tabular feature settings). */
/* Tanzifco — Color system
   ===============================================================
   Base ramps (raw values) → semantic aliases (use these in UI).
   Cool-gray neutrals + aqua-teal primary (water / cleanliness) +
   a dedicated confirm-green for the POS commit action. */

:root {
  /* ---- Neutrals (cool gray) ---------------------------------- */
  --gray-0:   #FFFFFF;
  --gray-25:  #F8FAFB;
  --gray-50:  #F1F5F6;
  --gray-100: #E7EDEF;
  --gray-200: #D6E0E3;
  --gray-300: #B7C5CA;
  --gray-400: #8C9DA3;
  --gray-500: #647378;
  --gray-600: #4B585C;
  --gray-700: #364043;
  --gray-800: #232B2D;
  --gray-900: #141A1B;

  /* ---- Primary: aqua-teal ------------------------------------ */
  --teal-50:  #E6FAF7;
  --teal-100: #C2F2EB;
  --teal-200: #8AE5DA;
  --teal-300: #4FD4C6;
  --teal-400: #1FC1B2;
  --teal-500: #0FB5A8;   /* brand primary */
  --teal-600: #0A9488;
  --teal-700: #0A766D;
  --teal-800: #0C5C56;
  --teal-900: #0B4843;

  /* ---- Confirm green (the big commit button) ----------------- */
  --green-50:  #E9F9EE;
  --green-100: #CDF0D8;
  --green-400: #2FBE63;
  --green-500: #16A34A;  /* CONFIRM */
  --green-600: #12873D;
  --green-700: #0E6B31;

  /* ---- Semantic hues ----------------------------------------- */
  --amber-50:  #FEF6E7;
  --amber-100: #FCEBC4;
  --amber-500: #F59E0B;
  --amber-600: #D27D04;
  --amber-700: #A15D02;

  --red-50:   #FDECEC;
  --red-100:  #FAD3D4;
  --red-500:  #E5484D;
  --red-600:  #CC3438;
  --red-700:  #A82529;

  --blue-50:  #EAF2FF;
  --blue-100: #CFE0FE;
  --blue-500: #2D7FF9;
  --blue-600: #1E66DC;
  --blue-700: #1850B0;

  /* ---- POS service-tile palette (the "menu") ----------------- */
  /* Each service type gets a distinct, harmonious color so the
     receptionist learns the menu by color, not by reading. */
  --tile-regular:   #0FB5A8;  /* Regular Cleaning  — teal  */
  --tile-deep:      #2D6BE0;  /* Deep Cleaning     — blue  */
  --tile-move:      #7C5CE0;  /* Move-in/out       — violet*/
  --tile-sofa:      #E07A3C;  /* Sofa & Carpet     — orange*/
  --tile-windows:   #1FA8D6;  /* Windows           — sky   */
  --tile-hourly:    #E0598A;  /* Hourly Maid       — rose  */
  --tile-regular-tint: #E6FAF7;
  --tile-deep-tint:    #EAF1FE;
  --tile-move-tint:    #F1EDFC;
  --tile-sofa-tint:    #FCF0E8;
  --tile-windows-tint: #E7F6FC;
  --tile-hourly-tint:  #FCEBF2;

  /* ===============================================================
     SEMANTIC ALIASES — reference these in components/UI kits.
     =============================================================== */

  /* Surfaces & backgrounds */
  --bg-app:        var(--gray-50);     /* app canvas behind panels */
  --surface-card:  var(--gray-0);      /* panels, cards, tickets   */
  --surface-sunken:var(--gray-25);     /* inset wells, list rows   */
  --surface-raised:var(--gray-0);
  --surface-inverse: var(--gray-900);

  /* Text */
  --text-strong:  var(--gray-900);     /* headings, prices         */
  --text-body:    var(--gray-700);     /* default body             */
  --text-muted:   var(--gray-500);     /* secondary / hints        */
  --text-faint:   var(--gray-400);     /* placeholders, disabled   */
  --text-on-brand:#FFFFFF;
  --text-on-dark: var(--gray-50);

  /* Borders & dividers */
  --border-subtle: var(--gray-100);
  --border-default:var(--gray-200);
  --border-strong: var(--gray-300);
  --border-focus:  var(--teal-500);

  /* Brand / interactive */
  --brand:         var(--teal-500);
  --brand-hover:   var(--teal-600);
  --brand-active:  var(--teal-700);
  --brand-tint:    var(--teal-50);
  --brand-ring:    rgba(15,181,168,0.32);

  /* Confirm action */
  --confirm:       var(--green-500);
  --confirm-hover: var(--green-600);
  --confirm-active:var(--green-700);

  /* Feedback */
  --success:       var(--green-500);
  --success-tint:  var(--green-50);
  --warning:       var(--amber-500);
  --warning-tint:  var(--amber-50);
  --danger:        var(--red-500);
  --danger-hover:  var(--red-600);
  --danger-tint:   var(--red-50);
  --info:          var(--blue-500);
  --info-tint:     var(--blue-50);

  /* Booking / job statuses */
  --status-upcoming:    var(--blue-500);
  --status-upcoming-bg: var(--blue-50);
  --status-progress:    var(--amber-500);
  --status-progress-bg: var(--amber-50);
  --status-done:        var(--green-500);
  --status-done-bg:     var(--green-50);
  --status-cancelled:   var(--gray-400);
  --status-cancelled-bg:var(--gray-50);

  /* Invoice statuses */
  --pay-paid:    var(--green-500);
  --pay-unpaid:  var(--amber-500);
  --pay-overdue: var(--red-500);
}
/* Tanzifco — Typography
   ===============================================================
   One family (Cairo) carries the whole system: friendly, geometric,
   Arabic-native. Weight + size do the work. Prices and any numeric
   columns use tabular figures so digits align in the POS ticket. */

:root {
  /* ---- Families --------------------------------------------- */
  --font-sans: 'Cairo', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-display: var(--font-sans);   /* same family, heavier weights */
  --font-tabular: var(--font-sans);   /* pair with --num-tabular below */

  /* Apply to any element showing numbers/money to align digits */
  --num-tabular: "tnum" 1, "lnum" 1;   /* @kind font */

  /* ---- Weights ---------------------------------------------- */
  --fw-regular:   400;   /* @kind font */
  --fw-medium:    500;   /* @kind font */
  --fw-semibold:  600;   /* @kind font */
  --fw-bold:      700;   /* @kind font */
  --fw-extrabold: 800;   /* @kind font */
  --fw-black:     900;   /* @kind font */

  /* ---- Type scale (px) -------------------------------------- */
  /* POS-first: nothing critical below 15px; touch UI runs large. */
  --text-2xs:  11px;   /* micro labels, badge counts        */
  --text-xs:   13px;   /* meta, captions                    */
  --text-sm:   15px;   /* secondary body, dense lists       */
  --text-base: 17px;   /* default body / inputs             */
  --text-md:   19px;   /* emphasized body, tile labels      */
  --text-lg:   22px;   /* card titles, ticket lines         */
  --text-xl:   27px;   /* section headings                  */
  --text-2xl:  34px;   /* screen titles                     */
  --text-3xl:  44px;   /* big totals, price hero            */
  --text-4xl:  56px;   /* display / receipt grand total     */

  /* ---- Line heights ----------------------------------------- */
  --lh-tight:   1.1;    /* @kind font */
  --lh-snug:    1.25;   /* @kind font */
  --lh-normal:  1.45;   /* @kind font */
  --lh-relaxed: 1.6;    /* @kind font */

  /* ---- Letter spacing --------------------------------------- */
  --ls-tight:   -0.02em;  /* @kind font */
  --ls-normal:  0;        /* @kind font */
  --ls-wide:    0.01em;   /* @kind font */
  --ls-caps:    0.06em;   /* @kind font */

  /* ---- Semantic text roles ---------------------------------- */
  --role-display-size:  var(--text-3xl);
  --role-display-weight: var(--fw-extrabold);
  --role-title-size:    var(--text-2xl);
  --role-title-weight:  var(--fw-bold);
  --role-heading-size:  var(--text-xl);
  --role-heading-weight: var(--fw-bold);
  --role-body-size:     var(--text-base);
  --role-body-weight:   var(--fw-regular);
  --role-label-size:    var(--text-sm);
  --role-label-weight:  var(--fw-semibold);
  --role-price-weight:  var(--fw-bold);
}

/* Helper class consumers can apply for aligned numerals */
.tnum { font-feature-settings: var(--num-tabular); font-variant-numeric: tabular-nums lining-nums; }
/* Tanzifco — Spacing, radii, shadows, sizing
   ===============================================================
   4px base grid. Touch-first sizing: POS targets never below 48px.
   Soft, clean shadows (no heavy drop shadows — this is a bright,
   airy product). */

:root {
  /* ---- Spacing scale (4px base) ----------------------------- */
  --space-0:  0;
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  6px;
  --space-4:  8px;
  --space-5:  12px;
  --space-6:  16px;
  --space-7:  20px;
  --space-8:  24px;
  --space-9:  32px;
  --space-10: 40px;
  --space-11: 48px;
  --space-12: 64px;
  --space-13: 80px;

  /* ---- Radii ------------------------------------------------- */
  --radius-xs:  6px;
  --radius-sm:  8px;
  --radius-md:  12px;   /* default control radius (buttons, inputs) */
  --radius-lg:  16px;   /* cards, tiles                              */
  --radius-xl:  22px;   /* large panels                              */
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* ---- Touch targets (POS) ---------------------------------- */
  --tap-min:  48px;   /* absolute minimum interactive height */
  --tap-md:   56px;   /* standard POS button                 */
  --tap-lg:   64px;   /* primary actions, time slots         */
  --tap-xl:   80px;   /* CONFIRM button, service tiles        */

  /* ---- Shadows (soft, cool-tinted) -------------------------- */
  --shadow-xs:  0 1px 2px rgba(20,26,27,0.06);
  --shadow-sm:  0 1px 3px rgba(20,26,27,0.08), 0 1px 2px rgba(20,26,27,0.04);
  --shadow-md:  0 4px 12px rgba(20,26,27,0.08), 0 2px 4px rgba(20,26,27,0.04);
  --shadow-lg:  0 12px 28px rgba(20,26,27,0.12), 0 4px 8px rgba(20,26,27,0.05);
  --shadow-xl:  0 24px 56px rgba(20,26,27,0.16), 0 8px 16px rgba(20,26,27,0.06);
  --shadow-inset: inset 0 1px 2px rgba(20,26,27,0.06);

  /* Colored elevation for active/selected tiles */
  --shadow-brand: 0 8px 20px rgba(15,181,168,0.28);
  --shadow-confirm: 0 8px 22px rgba(22,163,74,0.30);

  /* Focus ring */
  --ring-brand: 0 0 0 3px var(--brand-ring);
  --ring-width: 3px;

  /* ---- Layout ----------------------------------------------- */
  --sidebar-w:    248px;
  --sidebar-w-collapsed: 76px;
  --panel-gap:    var(--space-5);
  --content-max:  1280px;

  /* ---- Motion ----------------------------------------------- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);      /* @kind other */
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);     /* @kind other */
  --ease-snap:  cubic-bezier(0.34, 1.56, 0.64, 1);  /* @kind other */
  --dur-fast:   120ms;   /* @kind other */
  --dur-base:   200ms;   /* @kind other */
  --dur-slow:   320ms;   /* @kind other */
}
/* Tanzifco — Base reset & primitives
   ===============================================================
   Minimal, opinionated reset. Sets the app canvas, default type,
   and a few global affordances (focus ring, selection color).
   RTL-ready: uses logical properties where it matters. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--role-body-size);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }

h1, h2, h3, h4 {
  color: var(--text-strong);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-bold);
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; border: none; background: none; }

a { color: var(--brand); text-decoration: none; }

::selection { background: var(--teal-200); color: var(--gray-900); }

:focus-visible {
  outline: none;
  box-shadow: var(--ring-brand);
}

img { display: block; max-width: 100%; }

/* Numbers everywhere align */
.tnum, [data-num] {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: var(--num-tabular);
}

/* Scrollbars: subtle, cool */
* { scrollbar-width: thin; scrollbar-color: var(--gray-300) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: var(--radius-pill); border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--gray-400); background-clip: content-box; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}