/* ==========================================================================
   Design Tokens — Ultra Modern Dark
   Source: ultra modern dark design guide.md, section 18
   ========================================================================== */

:root {
  /* Core neutrals */
  --bg-primary: #090909;
  --bg-secondary: #121212;
  --surface: #181818;
  --surface-elevated: #202020;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);

  /* Typography colors */
  --text-primary: #F5F5F5;
  --text-secondary: #C7C7C7;
  --text-muted: #9A9A9A;
  --text-dim: #6F6F6F;

  /* Brand metallic tones */
  --silver-light: #E3E3E3;
  --silver-mid: #B8B8B8;
  --silver-dark: #8F8F8F;

  /* Accent colors — use sparingly */
  --accent-red: #D9292F;
  --accent-blue: #1D4F91;
  --accent-champagne: #C7B08A;

  /* Border radius */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.28);
  --shadow-elevated: 0 18px 50px rgba(0, 0, 0, 0.38);

  /* Layout */
  --container: 1200px;
  --container-wide: 1320px;
  --container-reading: 860px;

  /* Spacing rhythm (desktop defaults) */
  --section-padding: 96px;

  /* Transitions */
  --transition: all 0.25s ease;

  /* Typography stacks */
  --font-display: "Playfair Display", "Georgia", serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Type scale — fluid (px-based; parent theme sets html to 10px) */
  --text-hero: clamp(40px, 5vw, 80px);
  --text-section: clamp(28px, 3vw, 48px);
  --text-card-title: clamp(18px, 1.5vw, 24px);
  --text-body: 16px;
  --text-small: 14px;

  /* Form-specific */
  --input-bg: #141414;
  --input-border: rgba(255, 255, 255, 0.10);
  --input-focus-border: var(--accent-red);
  --input-focus-shadow: 0 0 0 3px rgba(217, 41, 47, 0.15);
  --input-placeholder: #8E8E8E;
}