/* ============================================================
   BIMNovate · Design Tokens
   Sources:
     - bimnovate-uiux-revamp-plan.pdf (Phase 3 · Visual Design System) — roles
     - assets/img/brand/brand-spec.md — real palette extracted from bimnovate.mv
   These are the single source of truth for color, type, spacing,
   layout, motion, and architectural details. Components reference
   var(--token-*) — never hard-code these values elsewhere.

   The role discipline from the plan still applies:
     - Accent appears ONLY on CTAs, active indicators, hover, "live" dots
       — NEVER as a background fill.
     - Dark sections used at most twice per page.
     - Backgrounds alternate white / surface separated by 1px rules.
   ============================================================ */

:root {
  /* === COLOR ==============================================
     Real BIMNovate brand palette (winter-shadow + azul-turquesa scales)
     extracted from the WordPress theme's global preset variables. */

  /* Primary · brand slate scale "winter-shadow" 900 / 800 / 500 */
  --color-ink:          #182125;  /* winter-shadow-900 — matches logo outlines */
  --color-ink-light:    #28373d;  /* winter-shadow-800 */
  --color-ink-muted:    #4f6d7a;  /* winter-shadow-500 — THE primary brand slate */

  /* Surface · cool brand surface (azul-turquesa 50 / winter-shadow 50) */
  --color-surface:      #f0f9f9;  /* azul-turquesa-50 — barely tinted cool surface */
  --color-surface-warm: #edf0f2;  /* winter-shadow-50 — neutral grey (no warm tones in brand) */
  --color-surface-cool: #e1f3f3;  /* azul-turquesa-100 */
  --color-white:        #ffffff;  /* brand uses pure white, not cream */

  /* Accent · BRAND TURQUOISE "azul-turquesa-500" — used sparingly:
     primary CTAs / active nav indicator / hover states / "live" dots / links
     NEVER as a background fill. */
  --color-accent:       #67c2c5;  /* azul-turquesa-500 — THE brand colour */
  --color-accent-hover: #4caaad;  /* darker harmonic — custom, not in preset */

  /* Secondary · brand slate for data viz / 3D viewer / second-tier interactive */
  --color-blueprint:    #4f6d7a;  /* winter-shadow-500 */
  --color-blueprint-20: rgba(79, 109, 122, 0.2);

  /* Semantic */
  --color-success:      #3a9b6f;  /* cool green, harmonised with palette */
  --color-border:       #b9c5ca;  /* winter-shadow-200 */
  --color-border-light: #dce2e4;  /* winter-shadow-100 */

  /* === TYPOGRAPHY ========================================= */

  --font-display: 'DM Serif Display', 'Cormorant Garamond', 'Georgia', serif;
  --font-body:    'Instrument Sans', 'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', 'Courier New', monospace;

  /* Fluid scale — clamp(min, ideal, max). No breakpoint jumps. */
  --text-xs:   clamp(0.7rem,  0.65rem + 0.25vw, 0.9rem);
  --text-sm:   clamp(0.8rem,  0.75rem + 0.3vw,  0.9rem);
  --text-base: clamp(0.95rem, 0.9rem  + 0.3vw,  1.1rem);
  --text-lg:   clamp(1.15rem, 1rem    + 0.5vw,  1.35rem);
  --text-xl:   clamp(1.4rem,  1.15rem + 0.8vw,  1.75rem);
  --text-2xl:  clamp(1.8rem,  1.4rem  + 1.2vw,  2.5rem);
  --text-3xl:  clamp(2.2rem,  1.6rem  + 1.8vw,  3.5rem);
  --text-hero: clamp(2.8rem,  2rem    + 2.5vw,  5rem);

  /* === SPACING (fluid) ==================================== */
  --space-xs:  clamp(0.25rem, 0.2rem + 0.2vw, 0.5rem);
  --space-sm:  clamp(0.5rem,  0.4rem + 0.3vw, 0.75rem);
  --space-md:  clamp(1rem,    0.8rem + 0.5vw, 1.5rem);
  --space-lg:  clamp(1.5rem,  1.2rem + 0.8vw, 2.5rem);
  --space-xl:  clamp(2.5rem,  2rem   + 1.5vw, 4rem);
  --space-2xl: clamp(4rem,    3rem   + 2.5vw, 7rem);
  --space-3xl: clamp(6rem,    4rem   + 4vw,   10rem);

  /* === LAYOUT ============================================= */
  --max-width:        1280px;
  --max-width-narrow: 720px;
  --max-width-wide:   1440px;
  --grid-columns:     12;
  --grid-gutter:      clamp(1rem, 0.8rem + 0.5vw, 2rem);

  /* === MOTION ============================================= */
  --ease-out:    cubic-bezier(0.16, 1,    0.3,  1);
  --ease-in-out: cubic-bezier(0.65, 0,    0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   600ms;
  --duration-reveal: 900ms;

  /* === ARCHITECTURAL DETAILS ============================== */
  /* Rules instead of shadows/colour-blocks. Barely-there radii. */
  --rule-weight:    1px;
  --rule-color:     var(--color-border);
  --radius-sm:      2px;
  --radius-md:      4px;
  --shadow-subtle:  0 1px  3px rgba(24, 33, 37, 0.06);
  --shadow-card:    0 4px 20px rgba(24, 33, 37, 0.08);
  --shadow-lifted:  0 12px 40px rgba(24, 33, 37, 0.12);

  /* Z-index scale */
  --z-cursor: 9999;
  --z-overlay: 1000;
  --z-nav: 500;
  --z-base: 1;
}