/* =============================================================================
 * SEVA GLOBAL — GLOBAL STYLESHEET (design tokens)
 * Source of truth: "Seva-Global Website project AS.xlsx" → CSS tab.
 * Version: 1.0 · Project: Website redesign
 *
 * This file is hand-authored and shipped as-is (NOT Tailwind-compiled). It
 * defines the design-system custom properties. Tailwind utilities + the runtime
 * brand bridge (--sg-*) live separately in assets/css/main.css.
 * Loaded before main.css (see inc/enqueue.php).
 * ============================================================================= */

:root {

  /* ---------------------------------------------------------------------------
   * 01. COLOR PALETTE — Seva Blue ramp (primary brand, CTAs, links, nav)
   * ------------------------------------------------------------------------- */
  --color-blue-50:  #E8F1F9;
  --color-blue-100: #C0D4EB;
  --color-blue-200: #90C0F0;
  --color-blue-300: #7794BF;
  --color-blue-400: #4860A8;
  --color-blue-500: #3C60A8;   /* PRIMARY — CTAs, links */
  --color-blue-600: #3C54A8;   /* hover */
  --color-blue-700: #213054;   /* Navy — headlines, nav, footer, dark cards */
  --color-blue-900: #152747;   /* Deep navy — darkest surface */

  /* Semantic aliases — use these in components, never raw hex. */
  --color-brand:       var(--color-blue-500);
  --color-brand-hover: var(--color-blue-600);
  --color-brand-tint:  var(--color-blue-50);
  --color-brand-light: var(--color-blue-100);
  --color-brand-mid:   var(--color-blue-300);
  --color-brand-sky:   var(--color-blue-200);
  --color-navy:        var(--color-blue-700);
  --color-navy-deep:   var(--color-blue-900);

  /* ---------------------------------------------------------------------------
   * 02. SERVICE CARD COLORS — per-service ramp (tint / light / mid / base / dark)
   * ------------------------------------------------------------------------- */
  /* Indian Weddings — Magenta */
  --color-magenta-tint:  #FBEAF0;
  --color-magenta-light: #F4C0D1;
  --color-magenta-mid:   #D4537E;
  --color-magenta:       #993556;
  --color-magenta-dark:  #4B1528;
  --color-magenta-deep:  #72243E;
  /* LGBTQ+ Events — Teal */
  --color-teal-tint:  #E1F5EE;
  --color-teal-light: #9FE1CB;
  --color-teal-mid:   #22A07A;
  --color-teal:       #0F6E56;
  --color-teal-dark:  #04342C;
  /* Jewish Social Events — Purple */
  --color-purple-tint:  #EEEDFE;
  --color-purple-light: #AFA9EC;
  --color-purple-mid:   #7F77DD;
  --color-purple:       #534AB7;
  --color-purple-dark:  #26215C;
  --color-purple-deep:  #3C3489;
  /* Global Holiday Celebrations — Amber */
  --color-amber-tint:  #FAEEDA;
  --color-amber-light: #FAC775;
  --color-amber-mid:   #ECA72A;
  --color-amber:       #854F0B;
  --color-amber-dark:  #412402;
  --color-amber-deep:  #633806;

  /* ---------------------------------------------------------------------------
   * 03. NEUTRAL PALETTE
   * ------------------------------------------------------------------------- */
  --color-neutral-50:  #F5F6F8;
  --color-neutral-100: #E4E7ED;
  --color-neutral-200: #C9CED8;
  --color-neutral-300: #9AA2B0;
  --color-neutral-400: #6B7585;
  --color-neutral-600: #4A5568;
  --color-neutral-700: #2D3748;
  --color-neutral-900: #1A202C;

  /* ---------------------------------------------------------------------------
   * 04. SEMANTIC / STATUS COLORS
   * ------------------------------------------------------------------------- */
  --color-success:      #1A7F3C;
  --color-success-tint: #D4EDDA;
  --color-warning:      #B7791F;
  --color-warning-tint: #FFF3CD;
  --color-error:        #C0392B;
  --color-error-tint:   #FADBD8;
  --color-info:         var(--color-brand);
  --color-info-tint:    var(--color-brand-tint);

  /* ---------------------------------------------------------------------------
   * 05. SURFACE COLORS — backgrounds, borders, text
   * ------------------------------------------------------------------------- */
  --color-bg:            #FFFFFF;
  --color-bg-subtle:     var(--color-neutral-50);   /* Alternating sections */
  --color-border:        var(--color-neutral-100);  /* Default card borders */
  --color-border-strong: var(--color-neutral-200);  /* Input default, hover */
  --color-text:          var(--color-neutral-900);  /* Primary body text */
  --color-text-muted:    var(--color-neutral-600);  /* Secondary body */
  --color-text-hint:     var(--color-neutral-400);  /* Captions, labels, meta */
  --color-white:         #FFFFFF;

  /* ---------------------------------------------------------------------------
   * 06. TYPOGRAPHY (scale is documented here; the theme currently renders the
   *     pixel-matched scale — these clamp() values are the spec reference)
   * ------------------------------------------------------------------------- */
  --font-sans:  'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-serif: 'Lora', Georgia, 'Times New Roman', serif;   /* logo lockup + pull quotes only */
  --font-mono:  'Courier New', Courier, monospace;

  --text-hero:    clamp(32px, 4vw, 44px);
  --text-h1:      clamp(26px, 3vw, 36px);
  --text-h2:      clamp(20px, 2.5vw, 28px);
  --text-h3:      clamp(16px, 2vw, 20px);
  --text-body:    15px;
  --text-sm:      13px;
  --text-xs:      12px;
  --text-xxs:     11px;
  --text-eyebrow: 11px;

  --font-normal: 400;
  --font-medium: 500;
  --font-semi:   600;

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;
  --leading-loose:   1.85;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.07em;   /* eyebrow labels */

  /* ---------------------------------------------------------------------------
   * 07. SPACING — 4px base grid
   * ------------------------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  --section-pad-y:   var(--space-20);  /* 80px desktop */
  --section-pad-x:   var(--space-20);
  --section-pad-mob: var(--space-10);  /* 40px mobile */

  /* ---------------------------------------------------------------------------
   * 08. BORDER RADIUS
   * ------------------------------------------------------------------------- */
  --radius-sm:   4px;    /* Tags, small chips */
  --radius-md:   8px;    /* Inputs, icon boxes */
  --radius-lg:   12px;   /* Cards, testimonials */
  --radius-xl:   16px;   /* Section blocks, CTA band */
  --radius-2xl:  24px;   /* Large hero blocks */
  --radius-pill: 999px;  /* All buttons, badges, nav pills */
  --radius-full: 50%;    /* Avatars, circular elements */

  /* ---------------------------------------------------------------------------
   * 09. BORDERS
   * ------------------------------------------------------------------------- */
  --border-thin:     0.5px solid var(--color-border);
  --border-default:  1px solid var(--color-border-strong);
  --border-featured: 1.5px solid var(--color-brand);
  --border-accent:   2px solid var(--color-brand);   /* Quote left border */

  /* ---------------------------------------------------------------------------
   * 10. SHADOWS — navy-tinted
   * ------------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(33, 48, 84, 0.04);
  --shadow-sm: 0 2px 6px rgba(33, 48, 84, 0.06);
  --shadow-md: 0 4px 16px rgba(33, 48, 84, 0.08);
  --shadow-lg: 0 8px 32px rgba(33, 48, 84, 0.10);
  --shadow-xl: 0 16px 48px rgba(33, 48, 84, 0.12);

  /* ---------------------------------------------------------------------------
   * 11. MOTION / TRANSITIONS  (named in the spec; values are dev-set)
   * ------------------------------------------------------------------------- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* ---------------------------------------------------------------------------
   * 12. Z-INDEX  (named in the spec; values are dev-set)
   * ------------------------------------------------------------------------- */
  --z-header:   50;
  --z-dropdown: 40;
  --z-overlay:  60;
  --z-modal:    70;
}