/* ==========================================================================
   SHAMS-AL-QASWA — DESIGN TOKENS
   Single source of truth for all design decisions.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     COLOR — Brand
     ------------------------------------------------------------------------ */

  /* Primary — Teal (#1e8582) */
  --color-primary-50:  #e6f2f2;
  --color-primary-100: #c0dfde;
  --color-primary-200: #97c9c8;
  --color-primary-300: #6db3b1;
  --color-primary-400: #4ca29f;
  --color-primary-500: #1e8582;  /* BASE */
  --color-primary-600: #1a7574;
  --color-primary-700: #156363;
  --color-primary-800: #115151;
  --color-primary-900: #0a3a39;
  --color-primary-950: #052525;

  /* Secondary — Deep Blue (#0f3d56) */
  --color-secondary-50:  #e7eef2;
  --color-secondary-100: #c3d4dd;
  --color-secondary-200: #9bb6c6;
  --color-secondary-300: #7397ae;
  --color-secondary-400: #56809e;
  --color-secondary-500: #386a8d;
  --color-secondary-600: #1f5476;
  --color-secondary-700: #0f3d56;  /* BASE */
  --color-secondary-800: #0a2e42;
  --color-secondary-900: #051c29;
  --color-secondary-950: #020e15;

  /* Accent — Aqua (#4fd1c5) */
  --color-accent-50:  #e8faf8;
  --color-accent-100: #c5f2ed;
  --color-accent-200: #9eeae0;
  --color-accent-300: #76e1d2;
  --color-accent-400: #4fd1c5;  /* BASE */
  --color-accent-500: #2cbeb1;
  --color-accent-600: #20a89c;
  --color-accent-700: #198a80;
  --color-accent-800: #136d64;
  --color-accent-900: #0d4a44;

  /* ------------------------------------------------------------------------
     COLOR — Neutral (cool slate)
     ------------------------------------------------------------------------ */
  --color-white:    #ffffff;
  --color-neutral-50:  #f8fafb;
  --color-neutral-100: #f0f4f5;
  --color-neutral-200: #dde5e7;
  --color-neutral-300: #c2ced1;
  --color-neutral-400: #97a5a9;
  --color-neutral-500: #6c7a7e;
  --color-neutral-600: #4f5b5e;
  --color-neutral-700: #3a4346;
  --color-neutral-800: #242b2d;
  --color-neutral-900: #131818;
  --color-neutral-950: #0a0d0e;
  --color-black:    #000000;

  /* ------------------------------------------------------------------------
     COLOR — Semantic
     ------------------------------------------------------------------------ */
  --color-success:    #16a34a;
  --color-success-bg: #ecfdf5;
  --color-warning:    #f59e0b;
  --color-warning-bg: #fffbeb;
  --color-error:      #dc2626;
  --color-error-bg:   #fef2f2;
  --color-info:       #2563eb;
  --color-info-bg:    #eff6ff;

  --color-whatsapp:   #25d366;
  --color-whatsapp-hover: #1ebe5d;

  /* ------------------------------------------------------------------------
     COLOR — Surface tokens (semantic usage)
     ------------------------------------------------------------------------ */
  --surface-page:        var(--color-white);
  --surface-subtle:      var(--color-neutral-50);
  --surface-muted:       var(--color-neutral-100);
  --surface-inverse:     var(--color-secondary-700);
  --surface-brand:       var(--color-primary-500);
  --surface-brand-subtle:var(--color-primary-50);

  --text-primary:        var(--color-neutral-900);
  --text-secondary:      var(--color-neutral-700);
  --text-muted:          var(--color-neutral-500);
  --text-inverse:        var(--color-white);
  --text-brand:          var(--color-primary-500);
  --text-link:           var(--color-primary-600);

  --border-subtle:       var(--color-neutral-200);
  --border-default:      var(--color-neutral-300);
  --border-strong:       var(--color-neutral-400);
  --border-brand:        var(--color-primary-500);

  /* ------------------------------------------------------------------------
     TYPOGRAPHY — Families
     ------------------------------------------------------------------------ */
  --font-sans:   'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-arabic: 'Noto Naskh Arabic', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:   'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* TYPOGRAPHY — Weight */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold:800;

  /* TYPOGRAPHY — Size scale (modular 1.25 — major third) */
  --fs-display:   4.5rem;   /* 72px */
  --fs-h1:        3.5rem;   /* 56px */
  --fs-h2:        2.75rem;  /* 44px */
  --fs-h3:        2.25rem;  /* 36px */
  --fs-h4:        1.75rem;  /* 28px */
  --fs-h5:        1.5rem;   /* 24px */
  --fs-h6:        1.25rem;  /* 20px */
  --fs-body-lg:   1.125rem; /* 18px */
  --fs-body:      1rem;     /* 16px */
  --fs-body-sm:   0.875rem; /* 14px */
  --fs-caption:   0.75rem;  /* 12px */
  --fs-overline:  0.6875rem;/* 11px */

  /* TYPOGRAPHY — Line height */
  --lh-tight:    1.1;
  --lh-snug:     1.25;
  --lh-normal:   1.5;
  --lh-relaxed:  1.6;
  --lh-loose:    1.75;

  /* TYPOGRAPHY — Letter spacing */
  --ls-tighter: -0.025em;
  --ls-tight:   -0.015em;
  --ls-normal:   0;
  --ls-wide:     0.025em;
  --ls-wider:    0.05em;
  --ls-widest:   0.1em;

  /* ------------------------------------------------------------------------
     SPACING — 4px base
     ------------------------------------------------------------------------ */
  --space-0:   0;
  --space-1:   0.25rem;  /* 4px */
  --space-2:   0.5rem;   /* 8px */
  --space-3:   0.75rem;  /* 12px */
  --space-4:   1rem;     /* 16px */
  --space-5:   1.25rem;  /* 20px */
  --space-6:   1.5rem;   /* 24px */
  --space-8:   2rem;     /* 32px */
  --space-10:  2.5rem;   /* 40px */
  --space-12:  3rem;     /* 48px */
  --space-16:  4rem;     /* 64px */
  --space-20:  5rem;     /* 80px */
  --space-24:  6rem;     /* 96px */
  --space-32:  8rem;     /* 128px */
  --space-40:  10rem;    /* 160px */

  /* Section padding (vertical rhythm for landing page sections) */
  --section-py-sm: var(--space-16);
  --section-py-md: var(--space-20);
  --section-py-lg: var(--space-24);

  /* ------------------------------------------------------------------------
     RADIUS
     ------------------------------------------------------------------------ */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-3xl:  32px;
  --radius-full: 9999px;

  /* ------------------------------------------------------------------------
     SHADOWS — soft, professional, water-themed
     ------------------------------------------------------------------------ */
  --shadow-xs: 0 1px 2px rgba(15, 61, 86, 0.05);
  --shadow-sm: 0 1px 3px rgba(15, 61, 86, 0.08), 0 1px 2px rgba(15, 61, 86, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 61, 86, 0.06), 0 2px 4px rgba(15, 61, 86, 0.04);
  --shadow-lg: 0 10px 25px rgba(15, 61, 86, 0.08), 0 4px 10px rgba(15, 61, 86, 0.04);
  --shadow-xl: 0 20px 40px rgba(15, 61, 86, 0.10), 0 8px 16px rgba(15, 61, 86, 0.06);
  --shadow-2xl:0 30px 60px rgba(15, 61, 86, 0.15);
  --shadow-inner: inset 0 2px 4px rgba(15, 61, 86, 0.06);

  /* Branded glows */
  --shadow-brand:    0 8px 24px rgba(30, 133, 130, 0.25);
  --shadow-accent:   0 8px 32px rgba(79, 209, 197, 0.30);
  --shadow-whatsapp: 0 6px 20px rgba(37, 211, 102, 0.35);

  /* ------------------------------------------------------------------------
     MOTION
     ------------------------------------------------------------------------ */
  --duration-instant: 75ms;
  --duration-fast:    150ms;
  --duration-base:    250ms;
  --duration-slow:    350ms;
  --duration-slower:  500ms;
  --duration-slowest: 700ms;

  --ease-linear:   linear;
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Standard transition */
  --transition-base: all var(--duration-base) var(--ease-in-out);
  --transition-fast: all var(--duration-fast) var(--ease-out);
  --transition-slow: all var(--duration-slow) var(--ease-out);

  /* ------------------------------------------------------------------------
     LAYOUT
     ------------------------------------------------------------------------ */
  /* Breakpoints (reference — used in media queries) */
  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1536px;

  /* Container max-widths */
  --container-sm:  640px;
  --container-md:  750px;
  --container-lg:  980px;
  --container-xl:  1200px;
  --container-2xl: 1320px;

  /* Z-index scale */
  --z-base:      0;
  --z-dropdown:  1000;
  --z-sticky:    1020;
  --z-fixed:     1030;
  --z-backdrop:  1040;
  --z-modal:     1050;
  --z-popover:   1060;
  --z-tooltip:   1070;
  --z-floating:  1080;

  /* Focus ring */
  --focus-ring:        0 0 0 3px rgba(30, 133, 130, 0.35);
  --focus-ring-accent: 0 0 0 3px rgba(79, 209, 197, 0.40);

  /* Gradients */
  --gradient-brand:   linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-secondary-700) 100%);
  --gradient-water:   linear-gradient(135deg, var(--color-accent-400) 0%, var(--color-primary-500) 100%);
  --gradient-hero:    linear-gradient(135deg, var(--color-secondary-700) 0%, var(--color-primary-700) 50%, var(--color-primary-500) 100%);
  --gradient-subtle:  linear-gradient(180deg, var(--color-neutral-50) 0%, var(--color-white) 100%);
}