/*
  Y-SON Urban Lighting — Public Frontend
  File    : frontend-variables.css
  Version : v1.0.0 | 2026-05-20

  ALL design tokens for y-son.in public frontend.
  Every other frontend CSS file uses only these variables.
  No raw hex, px, or font values anywhere else.

  Prefix: --fe- on all tokens to avoid conflict with
  bhrama/shreeji tokens (--color-, --space- etc.)

  Reference: LSI v6 style.css — accent, navy, neutrals
  inherited for brand consistency.
*/

:root {

  /* ── Brand colours ──────────────────────────────────────── */
  --fe-accent:              #e8821a;
  --fe-accent-dark:         #c45e00;
  --fe-accent-dim:          #fff4e8;
  --fe-accent-shadow:       rgba(232, 130, 26, 0.35);
  --fe-accent-shadow-hover: rgba(232, 130, 26, 0.50);

  /* ── Dark palette ───────────────────────────────────────── */
  --fe-navy:                #1e2d40;
  --fe-navy-mid:            #2d3f55;
  --fe-navy-light:          #3d5068;
  --fe-navy-dim:            rgba(30, 45, 64, 0.06);

  /* ── Surface colours ────────────────────────────────────── */
  --fe-bg:                  #f8f7f4;
  --fe-surface:             #ffffff;
  --fe-surface-2:           #faf9f7;
  --fe-surface-3:           #f3f2ef;

  /* ── Border colours ─────────────────────────────────────── */
  --fe-border:              #e8e6e1;
  --fe-border-light:        #f0ede8;
  --fe-border-dark:         #d4d0c8;

  /* ── Text colours ───────────────────────────────────────── */
  --fe-text-1:              #1e2d40;
  --fe-text-2:              #4a5568;
  --fe-text-3:              #8a92a0;
  --fe-text-inverse:        #ffffff;
  --fe-text-inverse-dim:    rgba(255, 255, 255, 0.70);
  --fe-text-inverse-muted:  rgba(255, 255, 255, 0.45);

  /* ── Semantic colours ───────────────────────────────────── */
  --fe-success:             #0a7040;
  --fe-success-bg:          #e8f9f0;
  --fe-danger:              #b91c1c;
  --fe-danger-bg:           #fee2e2;
  --fe-warning:             #c27803;
  --fe-warning-bg:          #fdf6b2;
  --fe-info:                #2451b3;
  --fe-info-bg:             #e8f0ff;

  /* ── Typography ─────────────────────────────────────────── */
  --fe-font-heading:        'Poppins', system-ui, sans-serif;
  --fe-font-body:           'Inter', system-ui, -apple-system, sans-serif;
  --fe-font-mono:           'Courier New', Courier, monospace;

  --fe-text-xs:             0.75rem;
  --fe-text-sm:             0.875rem;
  --fe-text-base:           1rem;
  --fe-text-lg:             1.125rem;
  --fe-text-xl:             1.25rem;
  --fe-text-2xl:            1.5rem;
  --fe-text-3xl:            1.875rem;
  --fe-text-4xl:            2.25rem;
  --fe-text-5xl:            3rem;
  --fe-text-6xl:            3.75rem;

  --fe-weight-normal:       400;
  --fe-weight-medium:       500;
  --fe-weight-semibold:     600;
  --fe-weight-bold:         700;
  --fe-weight-black:        900;

  --fe-leading-tight:       1.2;
  --fe-leading-snug:        1.35;
  --fe-leading-base:        1.6;
  --fe-leading-loose:       1.8;

  --fe-tracking-tight:      -0.02em;
  --fe-tracking-normal:     0;
  --fe-tracking-wide:       0.04em;
  --fe-tracking-widest:     0.1em;

  /* ── Spacing ─────────────────────────────────────────────── */
  --fe-sp-1:    0.25rem;
  --fe-sp-2:    0.5rem;
  --fe-sp-3:    0.75rem;
  --fe-sp-4:    1rem;
  --fe-sp-5:    1.25rem;
  --fe-sp-6:    1.5rem;
  --fe-sp-8:    2rem;
  --fe-sp-10:   2.5rem;
  --fe-sp-12:   3rem;
  --fe-sp-16:   4rem;
  --fe-sp-20:   5rem;
  --fe-sp-24:   6rem;
  --fe-sp-32:   8rem;

  /* ── Border radius ───────────────────────────────────────── */
  --fe-radius-xs:           2px;
  --fe-radius-sm:           4px;
  --fe-radius-md:           8px;
  --fe-radius-lg:           12px;
  --fe-radius-xl:           16px;
  --fe-radius-2xl:          24px;
  --fe-radius-full:         9999px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --fe-shadow-xs:   0 1px 2px rgba(30, 45, 64, 0.04);
  --fe-shadow-sm:   0 1px 3px rgba(30, 45, 64, 0.07),
                    0 1px 2px rgba(30, 45, 64, 0.04);
  --fe-shadow-md:   0 4px 12px rgba(30, 45, 64, 0.08),
                    0 2px 4px rgba(30, 45, 64, 0.05);
  --fe-shadow-lg:   0 8px 24px rgba(30, 45, 64, 0.10),
                    0 3px 8px rgba(30, 45, 64, 0.06);
  --fe-shadow-xl:   0 16px 48px rgba(30, 45, 64, 0.12),
                    0 6px 16px rgba(30, 45, 64, 0.07);
  --fe-shadow-card: 0 2px 8px rgba(30, 45, 64, 0.06),
                    0 1px 2px rgba(30, 45, 64, 0.04);
  --fe-shadow-card-hover: 0 6px 20px rgba(30, 45, 64, 0.10),
                          0 2px 6px rgba(30, 45, 64, 0.06);

  /* ── Transitions ─────────────────────────────────────────── */
  --fe-ease-fast:   150ms ease;
  --fe-ease-base:   220ms ease;
  --fe-ease-slow:   350ms ease;
  --fe-ease-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Layout ──────────────────────────────────────────────── */
  --fe-max-width:       1280px;
  --fe-content-width:   768px;
  --fe-header-height:   68px;
  --fe-section-gap:     var(--fe-sp-20);

  /* ── Z-index scale ───────────────────────────────────────── */
  --fe-z-base:        1;
  --fe-z-above:       10;
  --fe-z-dropdown:    100;
  --fe-z-sticky:      200;
  --fe-z-overlay:     300;
  --fe-z-modal:       400;
  --fe-z-toast:       500;

  /* ── Hero ────────────────────────────────────────────────── */
  --fe-hero-overlay:  rgba(20, 30, 48, 0.72);
  --fe-hero-min-h:    560px;
}