/* ==========================================================================
   A1A.realty — Design Tokens & CSS Custom Properties
   Central source of truth for all visual design decisions.
   ========================================================================== */

:root {
  /* ── Color: Core Palette ─────────────────────────────────────────────── */
  --color-black:        #000000;
  --color-void:         #06060b;
  --color-obsidian:     #0a0a12;
  --color-carbon:       #0f0f1a;
  --color-graphite:     #161625;
  --color-slate:        #1e1e32;
  --color-steel:        #2a2a42;

  --color-white:        #ffffff;
  --color-ivory:        #f8f8fc;
  --color-silver:       #c8c8d8;
  --color-ash:          #8888a0;
  --color-muted:        #555570;

  /* ── Color: Accent ───────────────────────────────────────────────────── */
  --color-accent:       #00a3ff;
  --color-accent-hover: #0090e0;
  --color-accent-glow:  rgba(0, 163, 255, 0.15);
  --color-accent-soft:  rgba(0, 163, 255, 0.08);

  --color-accent-alt:   #00d4aa;
  --color-accent-warm:  #ff6b35;
  --color-accent-gold:  #d4a853;

  /* ── Color: Semantic ─────────────────────────────────────────────────── */
  --color-success:      #00d47e;
  --color-warning:      #ffb020;
  --color-danger:       #ff4060;

  /* ── Color: Gradients ────────────────────────────────────────────────── */
  --gradient-hero:      linear-gradient(165deg, #06060b 0%, #0a1628 40%, #0f0f1a 100%);
  --gradient-section:   linear-gradient(180deg, #0a0a12 0%, #0f0f1a 100%);
  --gradient-card:      linear-gradient(145deg, rgba(30,30,50,0.6) 0%, rgba(15,15,26,0.8) 100%);
  --gradient-accent:    linear-gradient(135deg, #00a3ff 0%, #0070cc 100%);
  --gradient-accent-alt: linear-gradient(135deg, #00a3ff 0%, #00d4aa 100%);
  --gradient-text:      linear-gradient(135deg, #ffffff 0%, #c8c8d8 100%);
  --gradient-gold:      linear-gradient(135deg, #d4a853 0%, #b8902e 100%);

  /* ── Typography ──────────────────────────────────────────────────────── */
  --font-display:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:          'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  --text-hero:          clamp(3rem, 6vw, 5.5rem);
  --text-display:       clamp(2.25rem, 4vw, 3.75rem);
  --text-h1:            clamp(2rem, 3.5vw, 3rem);
  --text-h2:            clamp(1.5rem, 2.5vw, 2.25rem);
  --text-h3:            clamp(1.25rem, 2vw, 1.5rem);
  --text-body-lg:       1.125rem;
  --text-body:          1rem;
  --text-small:         0.875rem;
  --text-xs:            0.75rem;
  --text-overline:      0.8125rem;

  --weight-light:       300;
  --weight-regular:     400;
  --weight-medium:      500;
  --weight-semibold:    600;
  --weight-bold:        700;
  --weight-extrabold:   800;

  --leading-tight:      1.1;
  --leading-snug:       1.25;
  --leading-normal:     1.6;
  --leading-relaxed:    1.75;

  --tracking-tight:     -0.03em;
  --tracking-normal:    -0.01em;
  --tracking-wide:      0.05em;
  --tracking-wider:     0.1em;
  --tracking-widest:    0.2em;

  /* ── Spacing ─────────────────────────────────────────────────────────── */
  --space-xs:           0.5rem;
  --space-sm:           0.75rem;
  --space-md:           1rem;
  --space-lg:           1.5rem;
  --space-xl:           2rem;
  --space-2xl:          3rem;
  --space-3xl:          4rem;
  --space-4xl:          6rem;
  --space-5xl:          8rem;
  --space-6xl:          10rem;

  --section-padding:    clamp(5rem, 10vw, 8rem) 0;
  --container-max:      1280px;
  --container-narrow:   960px;
  --container-wide:     1440px;
  --gutter:             clamp(1.5rem, 4vw, 3rem);

  /* ── Borders & Radius ────────────────────────────────────────────────── */
  --border-subtle:      1px solid rgba(255, 255, 255, 0.06);
  --border-light:       1px solid rgba(255, 255, 255, 0.1);
  --border-accent:      1px solid rgba(0, 163, 255, 0.3);
  --radius-sm:          6px;
  --radius-md:          10px;
  --radius-lg:          16px;
  --radius-xl:          24px;
  --radius-full:        9999px;

  /* ── Shadows ─────────────────────────────────────────────────────────── */
  --shadow-sm:          0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md:          0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg:          0 8px 48px rgba(0, 0, 0, 0.5);
  --shadow-glow:        0 0 40px rgba(0, 163, 255, 0.15);
  --shadow-glow-strong: 0 0 60px rgba(0, 163, 255, 0.25);

  /* ── Transitions ─────────────────────────────────────────────────────── */
  --ease-out:           cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:        cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:      150ms;
  --duration-normal:    300ms;
  --duration-slow:      500ms;
  --duration-slower:    800ms;

  /* ── Z-Index Scale ───────────────────────────────────────────────────── */
  --z-background:       -1;
  --z-default:          1;
  --z-card:             10;
  --z-nav:              100;
  --z-overlay:          500;
  --z-modal:            1000;
}