/* ============================================================
   Kanjo Crew — Design Tokens
   Drop this in once, then use the var(--kc-*) names anywhere.
   Works in the PWA and the marketing site (plain CSS, no build step).
   ============================================================ */
:root {
  /* ---- Brand palette ---- */
  --kc-eggplant:      #2A1136;  /* primary background */
  --kc-plum:          #3A1A4E;  /* gradient top / raised surface */
  --kc-purple-deep:   #1C0B26;  /* deepest shade / gradient bottom */
  --kc-indigo:        #5563C9;  /* primary accent — buttons, active */
  --kc-indigo-strong: #4452B0;  /* accent pressed / overlap lens */
  --kc-periwinkle:    #8884E4;  /* secondary accent / soft buttons */
  --kc-cyan:          #6DE1FE;  /* highlight — translate / globe */
  --kc-cyan-ink:      #5BC7E6;  /* cyan on light backgrounds */

  /* ---- Neutrals ---- */
  --kc-white:         #FFFFFF;
  --kc-paper:         #F4F2FA;  /* light app background */
  --kc-paper-line:    #E5E1F2;  /* hairline on light */
  --kc-ink:           #2A1136;  /* text on light */
  --kc-ink-soft:      #6E5E78;  /* secondary text on light */

  /* ---- Semantic (use these in product UI) ---- */
  --kc-bg:            var(--kc-eggplant);
  --kc-surface:       var(--kc-white);
  --kc-text:          var(--kc-ink);
  --kc-text-invert:   var(--kc-white);
  --kc-accent:        var(--kc-indigo);
  --kc-accent-soft:   var(--kc-periwinkle);
  --kc-highlight:     var(--kc-cyan);
  --kc-line:          var(--kc-paper-line);

  /* ---- Gradients ---- */
  --kc-gradient-bg:   linear-gradient(165deg, #3A1A4E 0%, #2A1136 60%, #1C0B26 100%);
  --kc-gradient-icon: linear-gradient(155deg, #4A2360 0%, #2A1136 72%);
  --kc-gradient-accent: linear-gradient(155deg, #6B73DB, #5563C9);

  /* ---- Typography ---- */
  --kc-font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --kc-font-mono: 'Space Grotesk', ui-monospace, monospace; /* labels / eyebrows */
  --kc-weight-regular: 500;
  --kc-weight-semibold: 600;
  --kc-weight-bold: 700;
  --kc-weight-extrabold: 800;

  /* ---- Radii ---- */
  --kc-radius-sm: 12px;
  --kc-radius-md: 18px;
  --kc-radius-lg: 28px;
  --kc-radius-icon: 23.5%;       /* app-icon squircle (of its size) */
  --kc-radius-pill: 999px;

  /* ---- Shadows ---- */
  --kc-shadow-sm: 0 6px 20px rgba(28, 11, 38, .14);
  --kc-shadow-md: 0 16px 32px rgba(28, 11, 38, .28);
  --kc-shadow-accent: 0 16px 32px rgba(85, 99, 201, .40);

  /* ---- Spacing scale ---- */
  --kc-space-1: 4px;  --kc-space-2: 8px;  --kc-space-3: 12px;
  --kc-space-4: 16px; --kc-space-5: 24px; --kc-space-6: 32px;
  --kc-space-7: 48px; --kc-space-8: 64px;
}

/* Load fonts (or self-host the same families):
   @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');
*/