/* ===================================================================
   XYON EMBEDDED - STANDARDIZED DESIGN TOKENS (v1)
   Refined from website_saurabh.html palette
   =================================================================== */

:root {
  /* -----------------------------------------------------------------
     1. RAW BRAND PALETTE (Extracted from Original)
     ----------------------------------------------------------------- */
  --ink: #102330;             /* Deep prussian slate / Primary typography */
  --muted: #637480;           /* Cool steel grey / Secondary text */
  --line: #dce4e8;            /* Pale cool grey / Standard borders & dividers */
  --blue: #126aa7;            /* Precision industrial cobalt / Eyebrows & accents */
  --cyan: #16aec8;            /* Electric aqua / Brand dot & interactive highlights */
  --pale: #f1f7f8;            /* Soft ice-blue / Section container */
  --dark: #0a1721;            /* Deep midnight obsidian / Dark section base */
  --white: #ffffff;           /* Crisp surface white */

  /* Extracted contextual shades */
  --cyan-bright: #62d4e5;     /* High-contrast cyan for dark backgrounds */
  --cyan-tint: #e5f3f6;       /* Soft powder cyan for CTA sections */
  --cyan-shadow: #cbe6eb;     /* Architectural accent shadow tone */
  --line-dark: #30414c;       /* Muted divider for dark section */
  --muted-dark: #a9b7c0;      /* Secondary text for dark section */

  /* -----------------------------------------------------------------
     2. SEMANTIC DESIGN TOKENS
     ----------------------------------------------------------------- */
  /* Surfaces */
  --surface-base: var(--white);
  --surface-subtle: var(--pale);
  --surface-accent: var(--cyan-tint);
  --surface-dark: var(--dark);
  --surface-dark-card: #0e1e2b;

  /* Typography Colors */
  --text-primary: var(--ink);
  --text-secondary: var(--muted);
  --text-link: var(--blue);
  --text-inverse-primary: var(--white);
  --text-inverse-secondary: var(--muted-dark);
  --text-dark-accent: var(--cyan-bright);

  /* Borders & Dividers */
  --border-light: var(--line);
  --border-dark: var(--line-dark);

  /* Typography Families */
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Typography Scale */
  --text-hero-h1: clamp(44px, 5.6vw, 73px);
  --text-section-h2: 42px;
  --text-card-h3: 21px;
  --text-body-lg: 18px;
  --text-body: 15px;
  --text-small: 13px;
  --text-mono-eyebrow: 11px;

  /* Elevation & Shadows */
  --shadow-visual-refined: 16px 16px 0 var(--cyan-shadow), 0 20px 35px -10px rgba(10, 23, 33, 0.15);

  /* Layout & Spacing */
  --wrap-width: min(1180px, 92%);
  --hero-pad-y: 92px;
  --section-pad-y: 80px;
  --radius-sm: 4px;

  /* Transitions */
  --transition-fast: 0.18s ease;
  --transition-smooth: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}