/* ==========================================================================
   DESIGN TOKENS — DesignHaus Studio, BLACK TITANIUM / ALUMINIUM / DARK GLASS
   Premium digital-studio system: deep titanium backgrounds, machined-
   aluminium borders, silver typography, restrained real-time lighting.
   Single source of truth for color/type/spacing across every page — do not
   scatter raw values.

   Migration note: every existing component/page already consumes the
   original variable names below (--charcoal-900, --gold-champagne,
   --bronze-border, --ivory, --warm-gray, ...). Rather than touch hundreds
   of call sites, this redesign repaints the SAME variable names with the
   new titanium/aluminium/silver values, so the whole site repaints
   consistently from this one file. New semantic aliases (--bg-primary,
   --surface-1..3, --text-primary/secondary/muted, --silver-*, --border-*,
   --radius-sm/md/lg, --transition-*) are added alongside for future work
   (the industry Hero scenes) to consume directly.
   ========================================================================== */
:root {
  /* --- surfaces (titanium) --- */
  --charcoal-900: #050606;   /* primary background */
  --charcoal-800: #070808;   /* section surface */
  --walnut-700: #090a0a;     /* secondary background depth layer */
  --obsidian-card: #111314;  /* card surface, dark titanium */

  /* --- aluminium / silver accents (NEVER used as body/heading text unless noted) --- */
  --bronze-border: rgba(168, 170, 172, 0.22);        /* fine 1px card/panel borders — subtle by default */
  --bronze-border-bright: rgba(242, 242, 242, 0.55); /* hover/active-brightened aluminium border */
  --gold-champagne: #f5f5f5;  /* headings, display type — silver-white */
  --gold-muted: #a7aaac;      /* eyebrows, small labels, icons — secondary silver */
  --gold-copper: #777a7c;     /* connector lines, mid aluminium */

  /* --- text (silver) --- */
  --ivory: #f5f5f5;          /* primary text on dark */
  --warm-gray: #a7aaac;      /* secondary/body text */
  --warm-gray-dim: #6f7375;  /* tertiary/meta text */

  /* --- semantic aliases (for future Hero work + new components) --- */
  --bg-primary: var(--charcoal-900);
  --bg-secondary: var(--charcoal-800);
  --surface-1: #151718;
  --surface-2: #0d0f10;
  --surface-3: #090a0b;
  --text-primary: var(--ivory);
  --text-secondary: var(--warm-gray);
  --text-muted: var(--warm-gray-dim);
  --silver-light: #f2f2f2;
  --silver-mid: #a8aaac;
  --silver-dark: #4a4d4f;
  --border-subtle: var(--bronze-border);
  --border-active: var(--bronze-border-bright);
  --glow-strength: 0.14;

  /* Brushed-aluminium gradient — for large gradient-clipped numbers/prices
     that previously used a gold-gradient-text treatment. Multiple
     brightness stops simulate light reflecting off machined metal. */
  --metallic-gradient: linear-gradient(
    105deg,
    #343638 0%,
    #d4d6d7 21%,
    #6e7173 43%,
    #f2f2f2 61%,
    #343638 82%,
    #b8bbbd 100%
  );

  /* --- fonts ---
     Premium modern sans display system: Inter for everything (headings,
     numbers, body, nav) per the Black Titanium brief's "modern premium
     sans-serif typography" direction — the earlier Playfair Display serif
     pairing is retired for this visual system. */
  --font-serif: "Inter", -apple-system, "Segoe UI", sans-serif;
  --font-sans: "Inter", -apple-system, "Segoe UI", sans-serif;

  /* --- radii / shadow language --- */
  --radius-card: 24px;
  --radius-btn: 10px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --shadow-card: 0 24px 60px -20px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.04);

  /* --- motion --- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 250ms var(--ease);
  --transition-med: 320ms var(--ease);
  --transition-slow: 700ms var(--ease);
  --transition-normal: var(--transition-med);

  --nav-h: 76px;

  /* --- shared card system (dh-card) — dark titanium surface + aluminium edge --- */
  --dh-card-bg-start: #151718;
  --dh-card-bg-mid: #0d0f10;
  --dh-card-bg-end: #090a0b;
  --dh-card-border: rgba(168, 170, 172, 0.22);
  --dh-card-border-hover: rgba(242, 242, 242, 0.5);
  --dh-card-radius: 9px;
  --dh-card-shadow:
    0 18px 42px -24px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 30px rgba(0, 0, 0, 0.2);
  --dh-card-media-gradient: linear-gradient(
    to top,
    rgba(4, 4, 5, 0.68) 0%,
    rgba(4, 4, 5, 0.5) 28%,
    rgba(4, 4, 5, 0.2) 62%,
    rgba(4, 4, 5, 0) 100%
  );
}