/* ============================================
   Klarti Landing Page — Design Tokens
   Adapted from app tokens.css for LP context
   Aligned with Google Stitch design system
   ============================================ */

:root {
  /* === Colors (aligned with Google Stitch design DNA) === */
  --color-bg: #FCF9F8;             /* Stitch background / surface-bright */
  --color-surface: #FFFFFF;        /* Stitch surface-container-lowest */
  --color-surface-raised: #FFFFFF;
  --color-surface-inset: #F6F3F2;   /* Stitch surface-container-low */
  --color-border: #E5E2E1;          /* Stitch surface-variant */

  --color-primary: #AD3226;         /* Stitch secondary: Brick Red */
  --color-primary-hover: #8F261B;
  --color-primary-text: #FFFFFF;

  /* CTA = accent (not primary) — Slate Blue */
  --color-cta: #334866;             /* Stitch primary: Slate Blue */
  --color-cta-hover: #26374F;
  --color-cta-text: #FFFFFF;

  --color-text: #1C1B1B;            /* Stitch on-surface */
  --color-text-secondary: #44474D;  /* Stitch on-surface-variant */
  --color-text-tertiary: #74777E;   /* Stitch outline */

  --color-success: #4E6851;
  --color-success-bg: #EAF2EB;

  /* === Typography === */
  --font-ui: 'Hanken Grotesk', 'Inter', system-ui, -apple-system, sans-serif;

  /* LP scale (aligned with Stitch font definitions using fluid clamp) */
  --text-hero: 600 clamp(2.25rem, 5.5vw, 4rem)/1.15 var(--font-ui);      /* Stitch display: 64px, font-weight 600 */
  --text-h2: 600 clamp(1.75rem, 3.5vw, 2.5rem)/1.2 var(--font-ui);        /* Stitch headline-lg: 40px, font-weight 600 */
  --text-h3: 500 clamp(1.25rem, 2.2vw, 1.5rem)/1.35 var(--font-ui);       /* Stitch headline-md: 24px, font-weight 500 */
  --text-body: 400 clamp(1rem, 1.5vw, 1.125rem)/1.6 var(--font-ui);      /* Stitch body-lg: 18px, font-weight 400 */
  --text-small: 400 0.875rem/1.55 var(--font-ui);                       /* Stitch label-md / body-md: 14px */
  --text-caption: 500 0.75rem/1.4 var(--font-ui);                        /* Stitch label-sm: 12px */

  /* === Spacing === */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-section: clamp(48px, 8vw, 96px);

  /* === Radius === */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* === Shadows === */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(51,72,102,0.06);
  --shadow-lg: 0 8px 24px rgba(51,72,102,0.08);
  --shadow-xl: 0 16px 48px rgba(51,72,102,0.12);

  /* === Animation === */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);

  /* === Layout === */
  --max-width: 1120px;
  --gutter: clamp(16px, 4vw, 32px);
}

/* === Dark Theme (harmonized from app and aligned with new design DNA) === */
[data-theme="dark"] {
  --color-bg: #1A1614;
  --color-surface: #252120;
  --color-surface-raised: #2E2926;
  --color-surface-inset: #141210;
  --color-border: #3D3632;

  --color-primary: #C4523D;
  --color-primary-hover: #D4634E;
  --color-primary-text: #FFFFFF;

  --color-cta: #6B839E;
  --color-cta-hover: #7D94B0;
  --color-cta-text: #FFFFFF;

  --color-text: #E8E0D8;
  --color-text-secondary: #9A918A;
  --color-text-tertiary: #6B6560;

  --color-success: #6B9E7A;
  --color-success-bg: #1E2B20;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 16px rgba(0,0,0,0.5);
  --shadow-xl: 0 16px 32px rgba(0,0,0,0.6);
}