/*
  Eyezone design tokens (Agent.md 10.2).
  The first block is the approved brand baseline: do not change it without the store owner's approval.
  Components must use these variables only; no hard-coded colors outside this file.
*/
:root {
  /* Approved baseline */
  --bg: #090B1A;
  --surface: #12152B;
  /* Bands a shade apart from the page, so the hero and the about section read as their own blocks (2026-10-28). */
  --band-hero: #10132A;
  --band-about: #0D1023;
  --surface-elevated: #191D38;
  --primary: #8A2EFF;
  --secondary: #24C8FF;
  --accent: #D83CFF;
  --text: #F4F5FF;
  --muted: #A9B2D0;

  /* Derived tokens. The shades of the main colour follow --primary, so the owner's own colour (StoreColours, set on
     the page's root) carries through the whole store. */
  --primary-text: color-mix(in srgb, var(--primary) 55%, #FFFFFF);
  --primary-hover: color-mix(in srgb, var(--primary) 85%, #FFFFFF);
  --on-primary: #FFFFFF;
  --on-secondary: #090B1A;
  --success: #2EE59D;
  --warning: #FFB547;
  --danger: #FF5C7A;
  --info: var(--secondary);
  --success-soft: rgba(46, 229, 157, 0.12);
  --warning-soft: rgba(255, 181, 71, 0.12);
  --danger-soft: rgba(255, 92, 122, 0.12);
  --info-soft: rgba(36, 200, 255, 0.12);
  --primary-soft: color-mix(in srgb, var(--primary) 14%, transparent);

  --border: rgba(169, 178, 208, 0.16);
  --border-strong: rgba(169, 178, 208, 0.32);
  --border-glow: color-mix(in srgb, var(--primary) 45%, transparent);
  --glass-bg: rgba(18, 21, 43, 0.72);
  --overlay: rgba(5, 6, 15, 0.72);
  --gradient-brand: linear-gradient(135deg, var(--primary) 0%, var(--accent) 50%, var(--secondary) 100%);
  --gradient-primary: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 60%, var(--accent)) 100%);
  --gradient-surface: linear-gradient(180deg, rgba(25, 29, 56, 0.9) 0%, rgba(18, 21, 43, 0.9) 100%);
  --focus-ring: 0 0 0 3px rgba(36, 200, 255, 0.55);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);
  --glow-primary: 0 0 0 1px var(--border-glow), 0 0 24px color-mix(in srgb, var(--primary) 25%, transparent);
  --glow-secondary: 0 0 0 1px rgba(36, 200, 255, 0.45), 0 0 24px rgba(36, 200, 255, 0.2);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --font-family: "Tajawal", system-ui, "Segoe UI", Tahoma, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 1.875rem;
  --fs-4xl: 2.25rem;
  --lh-body: 1.7;
  --lh-heading: 1.3;

  --duration-fast: 120ms;
  --duration-base: 200ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  --container: 1200px;
  --header-height: 64px;
  --admin-sidebar: 272px;
}

/*
  The calm light look of the store (owner's request, 2026-10-30: «الوان المتجر يريدها ان تكون اهدأ»), the default.
  App.razor sets data-theme on every page, the store's and the admin's (owner's request, 2026-10-30: «يجب توحيد
  الثيم سواء لوحة تحكم او زبون»). Its two colours match StoreColours.DefaultsFor("light").
*/
:root[data-theme="light"] {
  /* Cards a shade darker than the page, grey-blue like the store the owner pointed to (2026-10-31: «الكروت اجعهن
     اغمق بقليل»). */
  --bg: #F7F9FA;
  --surface: #EAF0F3;
  --band-hero: #E4ECF0;
  --band-about: #E8EFF2;
  --surface-elevated: #F1F5F7;
  --primary: #2A9D8F;
  --secondary: #5B8DB8;
  --accent: #E07A5F;
  --text: #1E2A32;
  --muted: #5D6B76;

  --primary-text: color-mix(in srgb, var(--primary) 78%, #000000);
  --primary-hover: color-mix(in srgb, var(--primary) 88%, #000000);
  --on-primary: #FFFFFF;
  --on-secondary: #FFFFFF;
  --success: #1F9D68;
  --warning: #B7721A;
  --danger: #C8455A;
  --success-soft: rgba(31, 157, 104, 0.1);
  --warning-soft: rgba(183, 114, 26, 0.1);
  --danger-soft: rgba(200, 69, 90, 0.1);
  --info-soft: rgba(91, 141, 184, 0.12);
  --primary-soft: color-mix(in srgb, var(--primary) 12%, transparent);

  --border: #D9E2E8;
  --border-strong: #C3CED6;
  --border-glow: color-mix(in srgb, var(--primary) 35%, transparent);
  --glass-bg: rgba(255, 255, 255, 0.9);
  --overlay: rgba(20, 30, 40, 0.45);
  --gradient-surface: linear-gradient(180deg, #F1F5F7 0%, #EAF0F3 100%);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--primary) 40%, transparent);

  --shadow-sm: 0 1px 3px rgba(20, 35, 45, 0.08);
  --shadow-md: 0 6px 18px rgba(20, 35, 45, 0.08);
  --shadow-lg: 0 14px 36px rgba(20, 35, 45, 0.12);
  --glow-primary: 0 0 0 1px var(--border);
  --glow-secondary: 0 0 0 1px var(--border);
}

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