/* ================================================================
   KikoPop — Design Tokens (SINGLE SOURCE OF TRUTH)
   Brand: Coral Pop
   Change here → changes everywhere
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Sora:wght@400;600;700;800&display=swap');

:root {
  /* ── Brand Colors ── */
  --kp-color-primary:     #FF6B6B;
  --kp-color-primary-lt:  #FF8E8E;
  --kp-color-primary-dk:  #E85555;
  --kp-color-accent:      #4ECDC4;
  --kp-color-accent-lt:   #6EE0D8;
  --kp-color-accent-dk:   #3DB8B0;
  --kp-color-secondary:   #FFE66D;
  --kp-color-secondary-dk:#F5D84A;
  --kp-color-tertiary:    #A78BFA;
  --kp-color-tertiary-dk: #8B6FE0;
  --kp-color-success:     #34D399;
  --kp-color-error:       #F43F5E;
  --kp-color-warning:     #FBBF24;

  /* ── Light Mode Surfaces ── */
  --kp-bg:         #FFF8F0;
  --kp-surface:    #FFFFFF;
  --kp-surface-2:  #FFF2E5;
  --kp-surface-3:  #FFE8D4;
  --kp-border:     #FFD6B8;
  --kp-border-lt:  #FFE0CC;

  /* ── Light Mode Text ── */
  --kp-text:       #2D1B0E;
  --kp-text-2:     #7A5F4A;
  --kp-text-3:     #B89B84;
  --kp-text-inv:   #FFFFFF;
  --kp-text-muted: var(--kp-text-2);

  /* ── Shadows ── */
  --kp-shadow-sm:  0 1px 3px rgba(255,107,107,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --kp-shadow:     0 4px 16px rgba(255,107,107,0.10), 0 2px 6px rgba(0,0,0,0.04);
  --kp-shadow-md:  0 8px 24px rgba(255,107,107,0.12), 0 3px 8px rgba(0,0,0,0.05);
  --kp-shadow-lg:  0 12px 40px rgba(255,107,107,0.14), 0 4px 12px rgba(0,0,0,0.06);
  --kp-shadow-pri: 0 4px 20px rgba(255,107,107,0.35);
  --kp-shadow-acc: 0 4px 20px rgba(78,205,196,0.30);

  /* ── Typography ── */
  --kp-font-head:  'Playfair Display', 'Sora', serif;
  --kp-font-body:  'Plus Jakarta Sans', sans-serif;

  /* ── Spacing Scale (4px base) ── */
  --kp-sp-1: 4px;   --kp-sp-2: 8px;   --kp-sp-3: 12px;
  --kp-sp-4: 16px;  --kp-sp-5: 20px;  --kp-sp-6: 24px;
  --kp-sp-8: 32px;  --kp-sp-10: 40px; --kp-sp-12: 48px;
  --kp-sp-16: 64px; --kp-sp-20: 80px; --kp-sp-24: 96px;

  /* ── Geometry ── */
  --kp-radius-sm: 8px;
  --kp-radius:    14px;
  --kp-radius-lg: 20px;
  --kp-radius-xl: 28px;
  --kp-radius-full: 9999px;

  /* ── Layout ── */
  --kp-max-w:     1200px;
  --kp-nav-h:     72px;

  /* ── Transitions ── */
  --kp-ease:      0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --kp-ease-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* ════════════════════════════════════════════════════
     ARTISAN PALETTE — Semantic shortcuts for quick edits
     Change one line here → updates everywhere below.
     ════════════════════════════════════════════════════ */
  --color-coral:          #FF6B6B;   /* Primary CTA, buttons, accents  */
  --color-turquoise:      #4ECDC4;   /* Secondary accent, glows, links  */
  --color-sunshine:       #FFE66D;   /* Headlines, status LED, sparks   */
  --color-obsidian:       #120F1F;   /* Machine shell, dark backgrounds */
  --color-obsidian-panel: #3D374D;   /* Dashboard inset surface         */
  --color-obsidian-dark:  #0e0b1a;   /* Deepest page background         */
  --color-lavender:       #A78BFA;   /* Free-tier badges, tertiary UI   */
}

/* ── Dark Mode Override ── */
[data-theme="dark"] {
  --kp-bg:         #1A1423;
  --kp-surface:    #231A30;
  --kp-surface-2:  #2E2240;
  --kp-surface-3:  #3D2E4F;
  --kp-border:     #4D3B62;
  --kp-border-lt:  #3D2E4F;

  --kp-text:       #F5EFF9;
  --kp-text-2:     #C4AADB;
  --kp-text-3:     #8B6FA8;
  --kp-text-muted: var(--kp-text-2);

  --kp-shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --kp-shadow:     0 4px 16px rgba(0,0,0,0.4);
  --kp-shadow-md:  0 8px 24px rgba(0,0,0,0.45), 0 3px 8px rgba(0,0,0,0.25);
  --kp-shadow-lg:  0 12px 40px rgba(0,0,0,0.5);
  --kp-shadow-pri: 0 4px 20px rgba(255,107,107,0.25);
  --kp-shadow-acc: 0 4px 20px rgba(78,205,196,0.20);
}