/* DASHE Beauty design tokens. Source of truth: design-system/tokens/tokens.json. Brand values match dashebeauty.com (surveyed 2026-09-14). */

/* ---- Brand fonts: the live site files converted to woff2 (Grotta: Latin; GE SS Two: Arabic + Latin; Astoria: the two quote marks only) ---- */
@font-face { font-family: "Grotta"; src: url("../fonts/grotta-light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Grotta"; src: url("../fonts/grotta-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "GE SS Two"; src: url("../fonts/ge-ss-two-light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "GE SS Two"; src: url("../fonts/ge-ss-two-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "GE SS Two"; src: url("../fonts/ge-ss-two-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Astoria"; src: url("../fonts/astoria-quotes.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+201C-201D; }
:root {
  /* ---- primitive ---- */
  --color-brand-50: #F7F5F2; /* dashebeauty.com */
  --color-brand-100: #E9E5E1; /* dashebeauty.com */
  --color-brand-200: #E0E0E0; /* dashebeauty.com */
  --color-brand-300: #CCCCCC; /* dashebeauty.com */
  --color-brand-400: #888888; /* dashebeauty.com */
  --color-brand-500: #000000; /* dashebeauty.com */
  --color-brand-600: #333333; /* dashebeauty.com */
  --color-brand-700: #1A1A1A; /* dashebeauty.com */
  --color-brand-800: #111111; /* dashebeauty.com */
  --color-brand-900: #000000; /* dashebeauty.com */
  --color-sand-50: #FBFAF8; /* dashebeauty.com */
  --color-sand-100: #F7F5F2; /* dashebeauty.com */
  --color-sand-200: #E9E5E1; /* dashebeauty.com */
  --color-sand-300: #E9E5E1; /* dashebeauty.com */
  --color-sand-400: #D9D2CA; /* dashebeauty.com */
  --color-sand-500: #AAA39B; /* dashebeauty.com */
  --color-gold-300: #E3CF9A;
  --color-gold-500: #C9A961;
  --color-gold-700: #8F7437;
  --color-ink-0: #FFFFFF;
  --color-ink-50: #F7F7F6;
  --color-ink-100: #EDEDEB;
  --color-ink-200: #DCDBD8;
  --color-ink-300: #C2C0BC;
  --color-ink-400: #9C9994;
  --color-ink-500: #75726D;
  --color-ink-600: #565350;
  --color-ink-700: #3B3937;
  --color-ink-800: #262523;
  --color-ink-900: #1C1B1B;
  --color-ink-1000: #0F0F0E;
  --color-green-100: #E3F3EA;
  --color-green-500: #1F8A4C;
  --color-green-700: #14603A;
  --color-amber-100: #FBF0DA;
  --color-amber-500: #C77D0E;
  --color-amber-700: #8A5609;
  --color-red-100: #FBE4E4;
  --color-red-500: #C93B3B;
  --color-red-700: #8E2626;
  --color-blue-100: #E3EDF9;
  --color-blue-500: #2F6DB5;
  --color-blue-700: #1F4A7D;
  --color-violet-100: #ECE6F7;
  --color-violet-500: #6F4FBF;
  --color-violet-700: #4C3585;
  --font-family-display-latin: "Grotta", "Helvetica Neue", Arial, sans-serif; /* dashebeauty.com; Grotta files are TRIAL, licence required before production */
  --font-family-body-latin: "Grotta", "Helvetica Neue", Arial, sans-serif; /* dashebeauty.com */
  --font-family-display-arabic: "GE SS Two", "Noto Sans Arabic", Tahoma, sans-serif; /* dashebeauty.com */
  --font-family-body-arabic: "GE SS Two", "Noto Sans Arabic", Tahoma, sans-serif; /* dashebeauty.com */
  --font-family-ui: "Grotta", "GE SS Two", system-ui, sans-serif; /* dashebeauty.com */
  --font-family-quote: "Astoria", Georgia, serif;
  --font-weight-light: 300;
  --font-family-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --font-size-2xs: 0.6875rem;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 3.75rem;
  --font-size-7xl: 4.5rem;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-leading-tight: 1.15;
  --font-leading-snug: 1.3;
  --font-leading-normal: 1.5;
  --font-leading-relaxed: 1.65;
  --font-leading-arabic: 1.8;
  --font-tracking-tight: -0.01em;
  --font-tracking-normal: 0;
  --font-tracking-wide: 0.02em;
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --radius-none: 0;
  --radius-xs: 2px;
  --border-width-hairline: 1px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(28,27,27,0.06);
  --shadow-sm: 0 2px 6px rgba(28,27,27,0.08);
  --shadow-md: 0 6px 18px rgba(28,27,27,0.10);
  --shadow-lg: 0 16px 40px rgba(28,27,27,0.14);
  --shadow-focus: 0 0 0 3px var(--color-focus-ring);
  --motion-duration-fast: 120ms;
  --motion-duration-base: 200ms;
  --motion-duration-slow: 320ms;
  --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
  --motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-overlay: 1000;
  --z-modal: 1100;
  --z-toast: 1200;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1440px;
  --layout-container-web: 1280px;
  --layout-container-prose: 68ch;
  --layout-sidebar-admin: 264px;
  --layout-sidebar-admin-collapsed: 72px;
  --layout-pos-rail: 88px;
  --layout-pos-basket: 420px;
  --layout-touch-min: 48px;
  --layout-touch-primary: 56px;
  /* ---- semantic ---- */
  --color-bg: var(--color-ink-0);
  --color-bg-subtle: var(--color-ink-50);
  --color-bg-muted: var(--color-ink-100);
  --color-bg-brand-soft: var(--color-brand-50);
  --color-bg-warm: var(--color-sand-100);
  --color-bg-inverse: var(--color-ink-900);
  --color-fg: var(--color-brand-900);
  --color-fg-muted: #555555;
  --color-fg-subtle: var(--color-brand-400);
  --color-fg-inverse: var(--color-ink-0);
  --color-fg-on-brand: var(--color-ink-0);
  --color-border: var(--color-brand-200);
  --color-border-strong: var(--color-brand-300);
  --color-brand: var(--color-brand-500);
  --color-brand-hover: var(--color-brand-600);
  --color-brand-active: var(--color-brand-700);
  --color-brand-soft: var(--color-brand-50);
  --color-accent: var(--color-sand-200);
  --color-premium: var(--color-gold-500);
  --color-premium-soft: var(--color-gold-300);
  --color-link: var(--color-brand-500);
  --color-focus-ring: rgba(0,0,0,0.35);
  --color-success: var(--color-green-500);
  --color-success-soft: var(--color-green-100);
  --color-warning: var(--color-amber-500);
  --color-warning-soft: var(--color-amber-100);
  --color-danger: var(--color-red-500);
  --color-danger-soft: var(--color-red-100);
  --color-info: var(--color-blue-500);
  --color-info-soft: var(--color-blue-100);
  --color-selected: var(--color-violet-500);
  --color-selected-soft: var(--color-violet-100);
  --appointment-booked: var(--color-blue-500);
  --appointment-confirmed: var(--color-violet-500);
  --appointment-checked-in: var(--color-amber-500);
  --appointment-in-service: var(--color-brand-500);
  --appointment-completed: var(--color-green-500);
  --appointment-no-show: var(--color-red-500);
  --appointment-cancelled: var(--color-ink-400);
  --appointment-marketplace: var(--color-gold-500);
  --typography-display-family: var(--font-family-display-latin);
  --typography-display-weight: var(--font-weight-light);
  --typography-display-leading: var(--font-leading-tight);
  --typography-display-tracking: var(--font-tracking-tight);
  --typography-heading-family: var(--font-family-display-latin);
  --typography-heading-weight: var(--font-weight-regular);
  --typography-heading-leading: var(--font-leading-snug);
  --typography-body-family: var(--font-family-body-latin);
  --typography-body-weight: var(--font-weight-regular);
  --typography-body-leading: var(--font-leading-normal);
  --typography-ui-family: var(--font-family-ui);
  --typography-ui-weight: var(--font-weight-medium);
  --typography-ui-leading: var(--font-leading-snug);
  --typography-numeric-family: var(--font-family-ui);
  --typography-numeric-weight: var(--font-weight-semibold);
  --density-control-h: 44px;
  --density-control-h-sm: 36px;
  --density-row-h: 48px;
  --density-gutter: var(--space-6);
  --density-section-y: var(--space-20);
  --density-radius-control: var(--radius-sm);
  --density-radius-card: var(--radius-md);
  --density-radius-media: var(--radius-md);
  /* ---- component ---- */
  --button-primary-bg: var(--color-brand);
  --button-primary-bg-hover: var(--color-brand-hover);
  --button-primary-bg-active: var(--color-brand-active);
  --button-primary-fg: var(--color-fg-on-brand);
  --button-primary-radius: var(--density-radius-control);
  --button-primary-h: var(--density-control-h);
  --button-primary-px: var(--space-6);
  --button-primary-shadow: var(--shadow-xs);
  --button-secondary-bg: transparent;
  --button-secondary-bg-hover: var(--color-bg-subtle);
  --button-secondary-fg: var(--color-fg);
  --button-secondary-border: var(--color-border-strong);
  --button-secondary-radius: var(--density-radius-control);
  --button-secondary-h: var(--density-control-h);
  --button-ghost-bg: transparent;
  --button-ghost-bg-hover: var(--color-bg-muted);
  --button-ghost-fg: var(--color-fg);
  --button-ghost-radius: var(--density-radius-control);
  --button-ghost-h: var(--density-control-h);
  --button-danger-bg: var(--color-danger);
  --button-danger-fg: var(--color-fg-inverse);
  --button-danger-radius: var(--density-radius-control);
  --button-danger-h: var(--density-control-h);
  --button-disabled-bg: var(--color-bg-muted);
  --button-disabled-fg: var(--color-fg-subtle);
  --input-bg: var(--color-bg);
  --input-fg: var(--color-fg);
  --input-placeholder: var(--color-fg-subtle);
  --input-border: var(--color-border);
  --input-border-hover: var(--color-border-strong);
  --input-border-focus: var(--color-brand);
  --input-border-error: var(--color-danger);
  --input-radius: var(--density-radius-control);
  --input-h: var(--density-control-h);
  --input-px: var(--space-4);
  --input-label-fg: var(--color-fg-muted);
  --input-help-fg: var(--color-fg-muted);
  --card-bg: var(--color-bg);
  --card-border: var(--color-border);
  --card-radius: var(--density-radius-card);
  --card-shadow: var(--shadow-sm);
  --card-p: var(--space-6);
  --badge-radius: var(--radius-pill);
  --badge-px: var(--space-2);
  --badge-h: 22px;
  --badge-font-size: var(--font-size-xs);
  --badge-weight: var(--font-weight-semibold);
  --table-header-bg: var(--color-bg-subtle);
  --table-header-fg: var(--color-fg-muted);
  --table-row-border: var(--color-border);
  --table-row-hover: var(--color-bg-subtle);
  --table-row-selected: var(--color-selected-soft);
  --table-row-h: var(--density-row-h);
  --nav-bg: var(--color-sand-200);
  --nav-fg: var(--color-fg);
  --nav-fg-active: var(--color-brand);
  --nav-border: transparent;
  --nav-h-web: 80px;
  --nav-h-admin: 56px;
  --sidebar-bg: var(--color-bg-inverse);
  --sidebar-fg: var(--color-ink-300);
  --sidebar-fg-active: var(--color-fg-inverse);
  --sidebar-item-active-bg: rgba(255,255,255,0.08);
  --sidebar-w: var(--layout-sidebar-admin);
  --sidebar-w-collapsed: var(--layout-sidebar-admin-collapsed);
  --toast-bg: var(--color-bg-inverse);
  --toast-fg: var(--color-fg-inverse);
  --toast-radius: var(--radius-md);
  --toast-shadow: var(--shadow-lg);
  --modal-bg: var(--color-bg);
  --modal-overlay: rgba(15,15,14,0.55);
  --modal-radius: var(--radius-lg);
  --modal-shadow: var(--shadow-lg);
  --modal-max-w: 640px;
  --slot-bg: var(--color-bg);
  --slot-border: var(--color-border-strong);
  --slot-fg: var(--color-fg);
  --slot-bg-selected: var(--color-brand);
  --slot-fg-selected: var(--color-fg-on-brand);
  --slot-bg-unavailable: var(--color-bg-muted);
  --slot-fg-unavailable: var(--color-fg-subtle);
  --slot-h: var(--layout-touch-min);
  --slot-radius: var(--radius-sm);
  --slot-min-w: 88px;
  --pos-tile-bg: var(--color-bg);
  --pos-tile-border: var(--color-border);
  --pos-tile-radius: var(--radius-md);
  --pos-tile-min-h: 96px;
  --pos-tile-fg: var(--color-fg);
  --pos-tile-price-fg: var(--color-fg-muted);
  --pos-tender-h: 72px;
  --pos-tender-radius: var(--radius-md);
  --pos-tender-bg: var(--color-bg-subtle);
  --pos-tender-bg-active: var(--color-brand);
  --pos-tender-fg-active: var(--color-fg-on-brand);
  --pos-keypad-key-h: 64px;
  --pos-keypad-key-radius: var(--radius-md);
  --pos-keypad-key-bg: var(--color-bg);
  --pos-keypad-key-border: var(--color-border);
  --pos-keypad-font-size: var(--font-size-2xl);
  --pos-total-font-size: var(--font-size-5xl);
  --pos-total-weight: var(--font-weight-bold);
  --pos-book-hour-h: 120px;
  --pos-book-col-min-w: 160px;
  --pos-book-gridline: var(--color-border);
  --pos-book-now-line: var(--color-danger);
  --pos-offline-bar-bg: var(--color-warning);
  --pos-offline-bar-fg: var(--color-ink-900);
  --pos-offline-bar-h: 40px;
  /* ---- customer site shell (dashebeauty.com) ---- */
  --shell-container: 1200px;
  --shell-wide: 1600px;
  --shell-text-strong: #333333;
  --shell-text-meta: #666666; /* DES-06: live #888888 is 3.3:1 on cream; #666666 meets WCAG AA 4.5:1 on white and cream */
  --shell-text-faint: #AAAAAA;
  --shell-rule-light: #EEEEEE;
  --shell-rule-dark: #444444;
  --shell-rule-ink: #191818;
  --shell-footer-bg: var(--color-brand-700);
  --shell-footer-fg: var(--color-ink-0);
  --shell-menu-bg: rgba(0,0,0,0.98);
  --shell-menu-dim: rgba(0,0,0,0.5);
  --shell-menu-sub-fg: #777777;
  --shell-menu-toggle-fg: #999999;
  --shell-menu-column-rule: #555555;
  --shell-hero-overlay: rgba(0,0,0,0.3);
  --shell-page-overlay: rgba(0,0,0,0.2);
  --shell-box-shadow: 0 5px 20px rgba(0,0,0,0.08);
  --shell-fab-size: 60px;
  --shell-fab-bg: #F4F4F4;
  --shell-fab-shadow: 0 4px 15px rgba(0,0,0,0.2);
  --shell-panel-shadow: -5px 0 15px rgba(0,0,0,0.15);
  --shell-whatsapp: #25D366;
  --shell-whatsapp-hover: #128C7E;
  --shell-header-h: 80px;
  --shell-header-h-mobile: 70px;
  --shell-logo-w: 180px;
  --shell-logo-w-mobile: 150px;
  --shell-logo-w-ar: 120px;
  --shell-logo-w-ar-mobile: 100px;
  --shell-lang-size: 40px;
  --shell-bar-h: 3px;
  --shell-z-fab: 999;
  --shell-z-menu: 1001;
  --shell-dot: rgba(255,255,255,0.5);
  --shell-vignette: radial-gradient(circle, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.45) 40%, rgba(0,0,0,0) 70%);
  --shell-accent-rule: #DDDDDD;
  --shell-price: #111111;
  --shell-name-shadow: 1px 1px 4px rgba(0,0,0,0.6);
  --shell-tile-shadow: 0 8px 25px rgba(0,0,0,0.08);
  --shell-tile-shadow-hover: 0 12px 30px rgba(0,0,0,0.12);
  --shell-field-bg: #F0F0F0;
  --shell-focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px #000000; /* DES-06: visible on light and dark surfaces */
}

/* ---- App profile: customer website (brand-forward, generous) ---- */
[data-app="web"] {
  --density-control-h: 48px;
  --density-control-h-sm: 40px;
  --density-row-h: 56px;
  --density-gutter: var(--space-8);
  --density-section-y: var(--space-24);
  --density-radius-control: var(--radius-none);
  --density-radius-card: var(--radius-none);
  --density-radius-media: var(--radius-none);
  --font-size-body: var(--font-size-md);
  --nav-h: var(--nav-h-web);
}

/* ---- App profile: admin back office (dense, neutral, data-first) ---- */
[data-app="admin"] {
  --density-control-h: 36px;
  --density-control-h-sm: 30px;
  --density-row-h: 44px;
  --density-gutter: var(--space-4);
  --density-section-y: var(--space-8);
  --density-radius-control: var(--radius-sm);
  --density-radius-card: var(--radius-md);
  --font-size-body: var(--font-size-sm);
  --typography-heading-family: var(--font-family-ui);
  --typography-display-family: var(--font-family-ui);
  --typography-body-family: var(--font-family-ui);
  --color-bg: var(--color-ink-50);
  --card-bg: var(--color-ink-0);
  --nav-h: var(--nav-h-admin);
}

/* ---- App profile: point of sale (touch-first, high contrast, large numerals) ---- */
[data-app="pos"] {
  --density-control-h: var(--layout-touch-primary);
  --density-control-h-sm: var(--layout-touch-min);
  --density-row-h: 64px;
  --density-gutter: var(--space-4);
  --density-section-y: var(--space-6);
  --density-radius-control: var(--radius-md);
  --density-radius-card: var(--radius-md);
  --font-size-body: var(--font-size-lg);
  --typography-heading-family: var(--font-family-ui);
  --typography-display-family: var(--font-family-ui);
  --typography-body-family: var(--font-family-ui);
  --color-bg: var(--color-ink-50);
  --color-border: var(--color-ink-300);
  --color-fg-muted: var(--color-ink-600);
  --card-bg: var(--color-ink-0);
  --input-h: var(--layout-touch-primary);
  --input-px: var(--space-5);
}

/* ---- Script-aware font swap ---- */
[dir="rtl"] {
  --typography-display-family: var(--font-family-display-arabic);
  --typography-heading-family: var(--font-family-display-arabic);
  --typography-body-family: var(--font-family-body-arabic);
  --font-leading-normal: var(--font-leading-arabic);
  --font-tracking-tight: 0;
  --font-tracking-wide: 0;
}
[dir="rtl"][data-app="admin"],
[dir="rtl"][data-app="pos"] {
  --typography-display-family: var(--font-family-ui);
  --typography-heading-family: var(--font-family-ui);
  --typography-body-family: var(--font-family-ui);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  :root { --motion-duration-fast: 0ms; --motion-duration-base: 0ms; --motion-duration-slow: 0ms; }
}

/* ---- Base element mapping (shared by all three apps) ---- */
html { font-family: var(--typography-body-family); color: var(--color-fg); background: var(--color-bg); line-height: var(--font-leading-normal); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--typography-heading-family); font-weight: var(--typography-heading-weight); line-height: var(--typography-heading-leading); margin: 0; }
.numeric, .price, .total, time { font-family: var(--typography-numeric-family); font-variant-numeric: tabular-nums; }
/* Amounts, ranges, times and codes never mirror: isolate them as LTR runs inside RTL text. */
.price, .total, .numeric, time, .code, [data-ltr] { unicode-bidi: isolate; direction: ltr; display: inline-block; }
:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--density-radius-control); }