/* =========================================================
   Trutus Technologies — Design Tokens
   Canonical source. No component should hardcode a hex value.
   ========================================================= */

:root {
  /* --- Color: brand (Dassault Systèmes-inspired: deep navy + sky blue, photography-led) --- */
  --trutus-navy: #0A2240;
  --trutus-navy-deep: #061630;
  --trutus-white: #FFFFFF;
  --sky-blue: #0091D5;        /* primary accent — links, CTAs, active states */
  --sky-blue-deep: #00699C;   /* hover/pressed state */
  --cool-gray: #5B6B7C;       /* secondary neutral, blue-tinted gray for body copy */
  --mist: #F0F3F6;            /* light neutral surface, cool off-white not stark white */

  /* --- Color: neutral ramp (opacity of trutus-navy) --- */
  --line-10: rgba(10, 34, 64, 0.06);
  --line-20: rgba(10, 34, 64, 0.12);
  --line-40: rgba(10, 34, 64, 0.28);
  --line-60: rgba(10, 34, 64, 0.48);
  --line-80: rgba(10, 34, 64, 0.72);

  /* --- Color: semantic (LIGHT THEME defaults) --- */
  --bg-base: var(--trutus-white);
  --bg-surface: var(--mist);
  --bg-inverse: var(--trutus-navy);
  --text-primary: var(--trutus-navy);
  --text-secondary: var(--cool-gray);
  --text-inverse: var(--trutus-white);
  --border-default: var(--line-20);
  --border-strong: var(--line-40);
  --accent: var(--sky-blue);
  --accent-dim: var(--sky-blue-deep);
  --cta: var(--sky-blue);
  --cta-hover: var(--sky-blue-deep);
  --success: #1F9D63;
  --danger: #C4362B;

  /* --- Typography (clean corporate sans, photography carries the personality —
     type stays quiet and functional, the way 3ds.com uses it) --- */
  --font-display: 'Manrope', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Consolas', monospace;

  --fs-xs: 0.75rem;    /* 12 */
  --fs-sm: 0.875rem;   /* 14 */
  --fs-base: 1rem;     /* 16 */
  --fs-md: 1.125rem;   /* 18 */
  --fs-lg: 1.375rem;   /* 22 */
  --fs-xl: 1.75rem;    /* 28 */
  --fs-2xl: 2.25rem;   /* 36 */
  --fs-3xl: 3rem;      /* 48 */
  --fs-4xl: 4rem;      /* 64 */

  --lh-tight: 1.1;
  --lh-body: 1.6;

  /* --- Spacing (8px base) --- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-12: 6rem;
  --space-15: 7.5rem;

  /* --- Layout --- */
  --container-max: 1280px;
  --container-gutter: 88px;
  --radius-sm: 4px;
  --radius-md: 8px;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 200ms;
  --duration-base: 400ms;

  /* --- Elevation (used sparingly — bracket frames do most of the work) --- */
  --shadow-sm: 0 2px 8px rgba(18, 22, 28, 0.06);
  --shadow-md: 0 8px 24px rgba(18, 22, 28, 0.10);
}

/* --- DARK THEME overrides --- */
[data-theme="dark"] {
  --bg-base: var(--trutus-navy-deep);
  --bg-surface: #0E2A4D;
  --bg-inverse: var(--trutus-white);
  --text-primary: var(--trutus-white);
  --text-secondary: rgba(255, 255, 255, 0.64);
  --text-inverse: var(--trutus-navy);
  --border-default: rgba(255, 255, 255, 0.14);
  --border-strong: rgba(255, 255, 255, 0.28);
  --cta: var(--sky-blue);
  --cta-hover: #33ABDF;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.40);
}

@media (max-width: 992px) {
  :root {
    --container-gutter: 24px;
    --fs-4xl: 2.75rem;
    --fs-3xl: 2.25rem;
    --fs-2xl: 1.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
  }
}