/* ============================================================
   Ebenworks design tokens — BRAND-KIT HANDOFF SNAPSHOT.
   NOTE: this file is NOT loaded by the website and is NOT its
   source of truth. The live tokens are the CSS custom properties
   in app/globals.css (the --* variables). This is a portable
   snapshot for external consumers / design tools; editing it does
   NOT change the site. Keep it in sync with globals.css by hand.
   Drop into your stylesheet root or use as a starting point
   for your own design system.
   ============================================================ */

:root {
  /* ------ Color: Brand ------ */
  --ew-orange:        #FC5F00;  /* primary accent, CTAs, brand mark */
  --ew-orange-deep:   #DA4300;  /* hover/pressed, deeper accent */
  --ew-orange-50:     #FFF1E6;
  --ew-orange-100:    #FFD9BF;
  --ew-orange-200:    #FFB280;
  --ew-orange-300:    #FF8B40;
  --ew-orange-400:    #FF7320;
  --ew-orange-500:    #FC5F00;  /* = --ew-orange */
  --ew-orange-600:    #DA4300;
  --ew-orange-700:    #B23700;
  --ew-orange-800:    #802800;
  --ew-orange-900:    #4D1800;

  /* ------ Color: Neutrals (warm-cool charcoal scale) ------ */
  --ew-ink:           #1D1009;  /* deepest text, original tagline color */
  --ew-charcoal:      #28282B;  /* darkest UI / wordmark dark */
  --ew-charcoal-2:    #323235;
  --ew-gray-900:      #28282B;  /* = --ew-charcoal */
  --ew-gray-800:      #3A3A3D;
  --ew-gray-700:      #555558;
  --ew-gray-600:      #6A6A6D;
  --ew-gray-500:      #8B8B8E;
  --ew-gray-400:      #B5B5B7;
  --ew-gray-300:      #D4D4D5;
  --ew-gray-200:      #E8E8E9;
  --ew-gray-100:      #F2F2F3;
  --ew-gray-50:       #F8F8F9;
  --ew-paper:         #FAF8F4;  /* warm off-white background */
  --ew-white:         #FFFFFF;

  /* ------ Color: Semantic ------ */
  --ew-success:       #10A36B;
  --ew-success-bg:    #E6F7EF;
  --ew-warning:       #E89400;
  --ew-warning-bg:    #FFF6E0;
  --ew-error:         #D6332E;
  --ew-error-bg:      #FCE8E7;
  --ew-info:          #2F73E0;
  --ew-info-bg:       #E7EFFB;

  /* ------ Color: Surface / Text role aliases ------ */
  --ew-bg:            var(--ew-paper);
  --ew-bg-subtle:     var(--ew-gray-100);
  --ew-bg-muted:      var(--ew-gray-200);
  --ew-bg-inverse:    var(--ew-charcoal);
  --ew-surface:       var(--ew-white);
  --ew-border:        var(--ew-gray-200);
  --ew-border-strong: var(--ew-gray-300);
  --ew-text:          var(--ew-ink);
  --ew-text-muted:    var(--ew-gray-700);
  --ew-text-subtle:   var(--ew-gray-600);
  --ew-text-inverse:  var(--ew-white);
  --ew-accent:        var(--ew-orange);
  --ew-accent-hover:  var(--ew-orange-deep);
  --ew-focus-ring:    color-mix(in oklab, var(--ew-orange) 50%, transparent);

  /* ------ Typography ------ */
  --ew-font-sans:     "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ew-font-display:  "Geist", -apple-system, BlinkMacSystemFont, sans-serif; /* Bricolage Grotesque for brand moments only */
  --ew-font-mono:     "Geist Mono", "SF Mono", "Monaco", "Cascadia Mono", "Roboto Mono", Consolas, monospace;

  --ew-text-xs:       0.75rem;   /* 12 */
  --ew-text-sm:       0.875rem;  /* 14 */
  --ew-text-base:     1rem;      /* 16 */
  --ew-text-lg:       1.125rem;  /* 18 */
  --ew-text-xl:       1.25rem;   /* 20 */
  --ew-text-2xl:      1.5rem;    /* 24 */
  --ew-text-3xl:      1.875rem;  /* 30 */
  --ew-text-4xl:      2.25rem;   /* 36 */
  --ew-text-5xl:      3rem;      /* 48 */
  --ew-text-6xl:      3.75rem;   /* 60 */
  --ew-text-7xl:      4.5rem;    /* 72 */

  --ew-leading-tight: 1.15;
  --ew-leading-snug:  1.3;
  --ew-leading-normal:1.5;
  --ew-leading-relaxed:1.65;

  --ew-tracking-tight: -0.02em;
  --ew-tracking-snug:  -0.01em;
  --ew-tracking-normal: 0;
  --ew-tracking-wide:  0.02em;

  --ew-weight-regular: 400;
  --ew-weight-medium:  500;
  --ew-weight-semibold:600;
  --ew-weight-bold:    700;
  --ew-weight-black:   900;

  /* ------ Spacing (4px base scale) ------ */
  --ew-space-0:  0;
  --ew-space-1:  0.25rem;  /*  4 */
  --ew-space-2:  0.5rem;   /*  8 */
  --ew-space-3:  0.75rem;  /* 12 */
  --ew-space-4:  1rem;     /* 16 */
  --ew-space-5:  1.25rem;  /* 20 */
  --ew-space-6:  1.5rem;   /* 24 */
  --ew-space-8:  2rem;     /* 32 */
  --ew-space-10: 2.5rem;   /* 40 */
  --ew-space-12: 3rem;     /* 48 */
  --ew-space-16: 4rem;     /* 64 */
  --ew-space-20: 5rem;     /* 80 */
  --ew-space-24: 6rem;     /* 96 */

  /* ------ Radius ------ */
  --ew-radius-sm: 4px;
  --ew-radius:    8px;
  --ew-radius-md: 12px;
  --ew-radius-lg: 16px;
  --ew-radius-xl: 24px;
  --ew-radius-full: 9999px;

  /* ------ Shadow ------ */
  --ew-shadow-sm:  0 1px 2px 0 rgba(29, 16, 9, 0.06);
  --ew-shadow:     0 2px 6px -1px rgba(29, 16, 9, 0.08), 0 1px 2px rgba(29, 16, 9, 0.04);
  --ew-shadow-md:  0 4px 12px -2px rgba(29, 16, 9, 0.10), 0 2px 4px rgba(29, 16, 9, 0.05);
  --ew-shadow-lg:  0 12px 24px -4px rgba(29, 16, 9, 0.12), 0 4px 8px rgba(29, 16, 9, 0.06);
  --ew-shadow-xl:  0 24px 48px -8px rgba(29, 16, 9, 0.16);
  --ew-shadow-glow:0 0 0 4px var(--ew-focus-ring);

  /* ------ Motion ------ */
  --ew-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ew-ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --ew-duration-fast: 120ms;
  --ew-duration-base: 200ms;
  --ew-duration-slow: 360ms;

  /* ------ Layout ------ */
  --ew-container:    1280px;
  --ew-container-sm:  720px;
  --ew-container-md:  960px;
  --ew-container-lg: 1200px;
  --ew-container-xl: 1440px;
}

/* ------ Dark mode override ------ */
@media (prefers-color-scheme: dark) {
  :root {
    --ew-bg:            #141416;
    --ew-bg-subtle:     #1A1A1D;
    --ew-bg-muted:      #232327;
    --ew-bg-inverse:    var(--ew-paper);
    --ew-surface:       #1E1E21;
    --ew-border:        #2A2A2D;
    --ew-border-strong: #38383B;
    --ew-text:          #EDEDEE;
    --ew-text-muted:    #B5B5B7;
    --ew-text-subtle:   #8B8B8E;
    --ew-text-inverse:  var(--ew-ink);
  }
}

/* Manual dark mode (use [data-theme="dark"] on html or body) */
[data-theme="dark"] {
  --ew-bg:            #141416;
  --ew-bg-subtle:     #1A1A1D;
  --ew-bg-muted:      #232327;
  --ew-bg-inverse:    var(--ew-paper);
  --ew-surface:       #1E1E21;
  --ew-border:        #2A2A2D;
  --ew-border-strong: #38383B;
  --ew-text:          #EDEDEE;
  --ew-text-muted:    #B5B5B7;
  --ew-text-subtle:   #8B8B8E;
  --ew-text-inverse:  var(--ew-ink);
}

/* ── Product accents (canonical register, 2026-08-14) ─────────────────────
   Derived from each product's OWN identity (logo, tokens, or marketing
   accent) — never invented. StatoSports' cyan is the signal color that
   replaced #FC5006 (too close to the reserved brand orange). Same values
   in every theme. Rules: infra/docs/BRAND.md. */
:root {
  --ew-product-imali: #00A651;
  --ew-product-chingu: #C4613A;
  --ew-product-phila: #0B6B47;
  --ew-product-bidwright: #2168E7;
  --ew-product-statosports: #0B5A94;
  --ew-product-diaspry: #E65A2A;
  --ew-product-izwi: #C2873B;
  --ew-product-tzohar: #6E54E8;
  --ew-product-azdates: #FB4A8D;
}