/* ============================================================
   FLAX REMODELING — DESIGN TOKENS
   Brand: MDECALS / Marconi Pagliaci — 2026
   
   Usage: imported first in every page via:
   <link rel="stylesheet" href="/assets/css/tokens.css">
   ============================================================ */

:root {

  /* ── BRAND COLORS ─────────────────────────────────────── */
  --color-dark:           #002925;
  --color-dark-deep:      #001a17;
  --color-dark-mid:       #003d36;
  --color-teal:           #00A393;
  --color-teal-light:     #00E5C9;
  --color-teal-dim:       rgba(0, 163, 147, 0.15);
  --color-orange:         #F05B29;
  --color-orange-dim:     rgba(240, 91, 41, 0.12);
  --color-offwhite:       #EBF7F6;
  --color-cream:          #F7F4EF;
  --color-white:          #ffffff;

  /* ── TEXT ─────────────────────────────────────────────── */
  --color-text-body:      #3a3a3a;
  --color-text-muted:     #888888;
  --color-text-light:     rgba(255, 255, 255, 0.55);
  --color-text-faint:     rgba(255, 255, 255, 0.35);

  /* ── TYPOGRAPHY ───────────────────────────────────────── */
  --font-display:         'Oswald', sans-serif;
  --font-serif:           'Playfair Display', serif;
  --font-body:            'DM Sans', sans-serif;

  --font-size-xs:         11px;
  --font-size-sm:         13px;
  --font-size-base:       15px;
  --font-size-md:         17px;
  --font-size-lg:         24px;
  --font-size-xl:         32px;
  --font-size-2xl:        48px;
  --font-size-3xl:        64px;
  --font-size-4xl:        80px;

  --font-weight-light:    300;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-bold:     600;
  --font-weight-black:    700;

  --line-height-tight:    0.95;
  --line-height-heading:  1.05;
  --line-height-body:     1.7;

  --letter-spacing-tight: -0.5px;
  --letter-spacing-wide:  1.5px;
  --letter-spacing-wider: 3px;

  /* ── SPACING ──────────────────────────────────────────── */
  --space-xs:   8px;
  --space-sm:   16px;
  --space-md:   24px;
  --space-lg:   40px;
  --space-xl:   64px;
  --space-2xl:  96px;
  --space-3xl:  120px;

  /* ── BORDERS & RADIUS ─────────────────────────────────── */
  --radius-sm:  3px;
  --radius-md:  6px;
  --radius-lg:  10px;
  --radius-xl:  12px;
  --radius-pill: 24px;
  --radius-circle: 50%;

  --border-subtle:   1px solid rgba(0, 229, 201, 0.08);
  --border-dim:      1px solid rgba(0, 229, 201, 0.15);
  --border-teal:     1px solid rgba(0, 229, 201, 0.25);
  --border-light:    1px solid rgba(255, 255, 255, 0.08);

  /* ── SHADOWS ──────────────────────────────────────────── */
  --shadow-sm:   0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-md:   0 8px 32px rgba(0, 41, 37, 0.10);
  --shadow-lg:   0 20px 56px rgba(0, 41, 37, 0.12);
  --shadow-orange: 0 16px 40px rgba(240, 91, 41, 0.35);
  --shadow-teal:   0 8px 32px rgba(0, 163, 147, 0.20);

  /* ── EASING ───────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── TRANSITIONS ──────────────────────────────────────── */
  --transition-fast:   0.15s var(--ease-out);
  --transition-base:   0.25s var(--ease-out);
  --transition-slow:   0.4s  var(--ease-out);
  --transition-reveal: 0.8s  var(--ease-out);

  /* ── LAYOUT ───────────────────────────────────────────── */
  --nav-height:      72px;
  --max-width:       1280px;
  --content-width:   1160px;
  --container-pad:   max(8vw, 48px);

  /* ── Z-INDEX ──────────────────────────────────────────── */
  --z-base:      1;
  --z-raised:    10;
  --z-overlay:   100;
  --z-sticky:    200;
  --z-nav:       800;
  --z-cursor:    9999;
  --z-loader:    9000;
}