/**
 * TOKENS.CSS - Design tokens and CSS custom properties
 * All colors, spacing, typography, and theme variables
 */

@import url('https://fonts.googleapis.com/css2?family=Kedebideri:wght@400;500;600;700;800;900&family=Momo+Trust+Sans:wght@200..800&family=Stack+Sans+Text:wght@200..700&family=Vend+Sans:ital,wght@0,300..700;1,300..700&display=swap');

:root {
  /* ========================================
     PANTONE 2026 Color Palettes
     ======================================== */
  
  /* Powdered Pastels */
  --p-lemon-icing: #F5EBC8;
  --p-nimbus-cloud: #D5D5D7;
  --p-raindrops-on-roses: #EBD8DC;
  --p-cloud-dancer: #F0EFEB;
  --p-ice-melt: #D4E4F1;
  --p-peach-dust: #F0D9CC;
  --p-almost-aqua: #C9D3C0;
  --p-orchid-tint: #DBD3DC;

  /* Take a Break */
  --p-iced-coffee: #B28F6B;
  --p-mango-mojito: #D79D31;
  --p-cocoa-creme: #876D58;
  --p-pink-lemonade: #EE6E8B;
  --p-tea: #9A9B86;
  --p-papaya: #FFA266;
  --p-caramel: #C37C54;

  /* Atmospheric */
  --p-nantucket-breeze: #B7D0EA;
  --p-alaskan-blue: #6EA9D2;
  --p-cosmic-sky: #AAABC4;
  --p-aqua-gray: #A6B2A9;
  --p-regatta: #497AB7;
  --p-rinsing-rivulet: #5DC6C3;
  --p-dusky-citron: #E4CC82;

  /* Comfort Zone */
  --p-shifting-sand: #D8C0AD;
  --p-coral-haze: #E38E84;
  --p-mountain-trail: #8A756A;
  --p-amberlight: #E3BEA2;
  --p-ashes-of-roses: #B5ACAB;
  --p-woodrose: #AE8C8E;
  --p-rose-brown: #80565B;

  /* Tropic Tonalities */
  --p-iris-orchid: #A867A4;
  --p-capri: #45BBCA;
  --p-kiwi-colada: #BDCA24;
  --p-sunny-lime: #E0EE88;
  --p-bright-marigold: #FF8E00;
  --p-paradise-pink: #E4465E;
  --p-blazing-yellow: #FEE815;

  /* Light & Shadow */
  --p-veiled-vista: #C7E4CA;
  --p-baltic-sea: #79B6D8;
  --p-golden-mist: #D6CD95;
  --p-quiet-violet: #A793AC;
  --p-cloud-cover: #9A9393;
  --p-hematite: #756F6A;
  --p-blue-fusion: #4A6275;

  /* Glamour & Gleam */
  --p-stretch-limo: #2B2C30;
  --p-scarlet-smile: #9F2336;
  --p-bordeaux: #97637C;
  --p-dragonfly: #2A5D69;
  --p-graphite: #55543B;
  --p-satin-slipper: #948A76;
  --p-micron: #646667;

  /* ========================================
     Brand Colors
     ======================================== */
  --brand-bg: var(--p-dragonfly);
  --brand-ink: color-mix(in srgb, var(--p-dragonfly) 35%, #000 65%);
  --brand-accent: var(--p-satin-slipper);

  /* ========================================
     App Background
     ======================================== */
  --bg0: var(--p-stretch-limo);
  --bg1: color-mix(in srgb, var(--p-stretch-limo) 80%, var(--p-graphite) 20%);

  /* ========================================
     Text Colors
     ======================================== */
  --text: var(--p-cloud-dancer);
  --muted: color-mix(in srgb, var(--p-cloud-dancer) 76%, transparent);
  --ink-soft: color-mix(in srgb, var(--p-cloud-dancer) 84%, transparent);
  --ink-mute: color-mix(in srgb, var(--p-cloud-dancer) 66%, transparent);

  /* ========================================
     Typography
     ======================================== */
  --font-body: "Vend Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-display: "Kedebideri", "Vend Sans", system-ui, sans-serif;
  --font-mono: "Stack Sans Text", "Momo Trust Sans", ui-monospace, monospace;

  --fs-0: 14px;
  --fs-1: 16px;
  --fs-2: 18px;
  --fs-3: 22px;

  --lh-tight: 1.12;
  --lh-body: 1.35;
  --lh-loose: 1.55;

  --w-regular: 500;
  --w-medium: 650;
  --w-bold: 800;
  --w-black: 900;

  /* ========================================
     Surfaces & Strokes
     ======================================== */
  --glass-1: color-mix(in srgb, var(--p-cloud-dancer) 5.5%, transparent);
  --glass-2: color-mix(in srgb, var(--p-cloud-dancer) 7.5%, transparent);

  --stroke-1: color-mix(in srgb, var(--p-cloud-dancer) 10%, transparent);
  --stroke-2: color-mix(in srgb, var(--p-cloud-dancer) 14%, transparent);
  --stroke-3: color-mix(in srgb, var(--p-cloud-dancer) 7%, transparent);

  --surface-card: color-mix(in srgb, var(--p-cloud-dancer) 4.5%, transparent);
  --surface-item: color-mix(in srgb, var(--p-cloud-dancer) 3.5%, transparent);
  --surface-dark: color-mix(in srgb, #000 14%, transparent);

  /* ========================================
     Shadows
     ======================================== */
  --shadow-lg: 0 22px 44px color-mix(in srgb, #000 45%, transparent);
  --shadow-md: 0 14px 28px color-mix(in srgb, #000 35%, transparent);

  /* ========================================
     Border Radius
     ======================================== */
  --r16: 16px;
  --r18: 18px;
  --r20: 20px;
  --r22: 22px;
  --r24: 24px;

  /* ========================================
     Safe Area (notch/home indicator)
     ======================================== */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* ========================================
     Button Tokens
     ======================================== */
  --btn-radius: var(--r20);
  --btn-pad: 14px;
  --btn-border: color-mix(in srgb, var(--p-cloud-dancer) 18%, transparent);
  --btn-bg: color-mix(in srgb, var(--p-cloud-dancer) 5.5%, transparent);
  --btn-ink: var(--p-cloud-dancer);
  --btn-bg-hover: color-mix(in srgb, var(--p-cloud-dancer) 7.5%, transparent);
  --btn-bg-active: color-mix(in srgb, var(--p-cloud-dancer) 4.5%, transparent);
  --btn-border-hover: color-mix(in srgb, var(--p-cloud-dancer) 26%, transparent);
  --btn-ghost-ink: color-mix(in srgb, var(--p-cloud-dancer) 92%, transparent);
  --btn-ghost-border: color-mix(in srgb, var(--p-cloud-dancer) 16%, transparent);
  --btn-ghost-bg: color-mix(in srgb, var(--p-cloud-dancer) 3%, transparent);

  /* ========================================
     Primary Gradient (Dragonfly)
     ======================================== */
  --primary-hi: color-mix(in srgb, var(--p-dragonfly) 92%, var(--p-cloud-dancer) 8%);
  --primary-lo: color-mix(in srgb, var(--p-dragonfly) 72%, var(--p-stretch-limo) 28%);
  --primary-lo2: color-mix(in srgb, var(--p-dragonfly) 62%, var(--p-stretch-limo) 38%);

  /* ========================================
     Aura Blobs
     ======================================== */
  --aura-gold: color-mix(in srgb, var(--p-satin-slipper) 70%, transparent);
  --aura-teal: color-mix(in srgb, var(--p-dragonfly) 78%, transparent);
  --aura-frost: color-mix(in srgb, var(--p-cloud-dancer) 100%, transparent);

  --blob-blur: 60px;
  --blob-opacity: .35;

  --driftA: 10s;
  --driftB: 12s;
  --driftC: 16s;
}