/* Graphium design language v2 ("AI skin") — extracted from app.graphium.ai Aug 28 2026.
   See DESIGN-DOC-AI.md. Legacy skin: tokens-legacy.css / main-legacy.css. */
:root {
  /* Dark surfaces (app's slate ramp) */
  --color-primary: #0f172a;          /* hero/header/footer panel (slate-900) */
  --color-primary-dark: #0b1120;     /* footer, deepest */
  --color-surface: #1e293b;          /* slate-800: dark cards/slots */
  --color-surface-deep: #0f172a;
  --color-surface-mid: #334155;

  /* Interactive teal (logo mark / app primary) */
  --color-accent: #1598b8;           /* primary-500: buttons */
  --color-accent-dark: #0f7894;      /* primary-600: links, hover text */
  --color-accent-hover: #06b6d4;     /* primary-400: button hover */
  --color-accent-hover-dark: #06b6d4;
  --color-cyan: #82d4ea;             /* primary-300: on-dark link hover */
  --color-cyan-footer: #82d4ea;

  /* Brand pair (Jeff, Aug 28) */
  --color-brand-red: #d3232c;        /* eyebrows/accents only, never buttons */
  --color-brand-blue: #263f84;       /* proof strip, persona accents */

  /* Text */
  --color-text: #ffffff;
  --color-text-muted: #cbd5e1;       /* gray-400 on dark */
  --color-text-on-light: #334155;    /* slate-700/800 body */
  --color-text-soft: #94a3b8;        /* gray-500 */

  /* Backgrounds */
  --color-bg: #ffffff;
  --color-bg-light: #f8fafc;         /* gray-100 alt sections */
  --color-bg-light-2: #f1f5f9;       /* gray-200 */
  --color-bg-light-3: #e2e8f0;       /* gray-300 borders */
  --color-divider: #e2e8f0;

  /* Typography */
  --font-heading: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-weight-body: 400;
  --font-weight-heading: 600;        /* nothing bolder than 600 */
  --font-weight-eyebrow: 600;
  --letter-spacing-h2: -0.024em;
  --letter-spacing-eyebrow: 0.08em;

  /* Family signature shared with graphium.ai: the mark's 30-degree chamfer, top-left + bottom-right */
  --clip-chamfer: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  --clip-hex: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);

  /* Shape */
  --radius: 6px;                     /* controls */
  --radius-sm: 6px;
  --radius-card: 12px;               /* cards, chips, media */
  --btn-shadow: none;                /* flat */

  /* Layout */
  --container-max: 1200px;
  --section-padding-y: clamp(90px, 8.3vw, 160px);
  --transition: all 150ms ease-in-out;
}