/* OutfitAI landing — Warm Stone design tokens (single-file export of the design system's token layer) */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Playfair+Display:wght@400;500;600&family=DM+Sans:wght@400;500;700&display=swap');

:root {
  /* ── Backgrounds ── */
  --canvas: #F6F0E6;          /* page wash */
  --canvas-deep: #EAE0D0;     /* gradient end / stone surface */
  --surface: #EAE0D0;         /* cards, sheets, tiles */
  --surface-elevated: #F2EAD8;/* modals, popovers */
  --tile: #EAE0D0;            /* neutral tile behind garment cutouts */

  /* ── Text ── */
  --ink: #2A2018;             /* primary text — warm near-black */
  --ink-muted: #7A6450;       /* secondary text — muted brown */
  --ink-tertiary: #AA9880;    /* placeholder, disabled */

  /* ── Action (the one CTA color) ── */
  --action: #6B4C38;
  --action-light: #8C6A54;    /* pressed / hover */
  --on-action: #FFF8F4;

  /* ── Accent (badges, active states, gold highlights) ── */
  --accent: #B87A3A;
  --accent-light: #D4A060;
  --on-accent: #FFF8EE;

  /* ── Borders & hairlines ── */
  --line: rgba(212, 196, 170, 0.40);
  --border: #D4C4AA;
  --border-subtle: #E2D6C4;

  /* ── Glass (warm translucent panels; never cool) ── */
  --glass-card: rgba(234, 224, 208, 0.80);
  --glass-card-hover: rgba(242, 234, 216, 0.90);
  --glass-border: rgba(212, 196, 170, 0.20);
  --glass-border-strong: rgba(212, 196, 170, 0.40);

  /* ── Semantic ── */
  --success: #4A7A3A;
  --success-light: #EAF3DE;
  --warning: #D4A017;
  --error: #A32D2D;
  --error-light: #FCEBEB;

  /* ── Gradients ── */
  --grad-page: linear-gradient(135deg, #F6F0E6, #EAE0D0);
  --grad-mesh-base: linear-gradient(165deg, #EADDC4, #E0CFB0);
  --grad-cta: linear-gradient(90deg, #B87A3A, #6B4C38);
  --grad-accent: linear-gradient(135deg, #B87A3A 0%, #D4A060 50%, #F2EAD8 100%);
  --grad-premium-dark: linear-gradient(135deg, #2A2018 0%, #6B4C38 40%, #B87A3A 100%);
  --grad-subtle: linear-gradient(180deg, #F6F0E6, #EAE0D0);

  /* ── Type ── */
  --font-ui: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;

  --text-hero: 800 26px/1.2 var(--font-ui);
  --text-title: 800 20px/1.25 var(--font-ui);
  --text-section-head: 800 18px/1.3 var(--font-ui);
  --text-body-md: 500 14px/1.5 var(--font-ui);
  --text-overline: 700 11px/1.4 var(--font-ui);
  --text-caption: 500 11px/1.4 var(--font-ui);
  --text-chip: 600 13px/1.4 var(--font-ui);
  --text-screen-title: 500 28px/1.15 var(--font-display);
  --text-section-title: 500 22px/1.3 var(--font-display);
  --text-card-title: 500 15px/1.4 var(--font-display);
  --text-prose: 400 14px/1.6 var(--font-body);
  --text-label: 500 10px/1.4 var(--font-body);

  --tracking-hero: -0.6px;
  --tracking-title: -0.5px;
  --tracking-overline: 1.2px;
  --tracking-label: 2.5px;

  /* ── Spacing ── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-xxl: 24px;
  --space-xxxl: 32px;

  /* ── Radii ── */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 100px;

  /* ── Shadows — warm ink + warm gold, never cool grey ── */
  --shadow-glass: 0 8px 32px rgba(42, 32, 24, 0.08), 0 2px 8px rgba(184, 122, 58, 0.10);
  --shadow-elevated: 0 16px 48px rgba(42, 32, 24, 0.12), 0 4px 16px rgba(184, 122, 58, 0.15);
  --shadow-card: 0 14px 30px -16px rgba(42, 32, 24, 0.16);
  --shadow-cta: 0 5px 14px -3px rgba(184, 122, 58, 0.35);
  --shadow-avatar: 0 4px 12px rgba(184, 122, 58, 0.35);

  /* ── Semantic aliases ── */
  --text-body: var(--ink);
  --text-muted: var(--ink-muted);
  --surface-card: var(--surface);
  --bg-page: var(--canvas);
}