/* ══════════════════════════════════════════════════════════════
   FridayCMS — Shared Design Tokens
   Single source of truth for public pages & page builder Canvas.
   ══════════════════════════════════════════════════════════════ */

/* ── Dark Theme (default) ── */
:root,
[data-theme='dark'] {
  --primary: #77bac0;
  --primary-light: #9dd3d8;
  --primary-dark: #5a9da3;
  --accent: #77bac0;
  --accent-lt: #9dd3d8;

  --bg: #0d0d14;
  --bg-dark: #0a0a10;
  --bg-card: #13131f;
  --bg-panel: #1a1a2a;
  --bg-hover: rgba(119, 186, 192, 0.06);

  --text: #e8e8f0;
  --text-mid: #9090b0;
  --text-dim: #5a5a7a;

  --border: #2a2a42;
  --border-lt: #3a3a5a;

  --mint: #00d4aa;
  --coral: #ff6b6b;
  --gold: #ffb547;

  --accent-a05: rgba(119, 186, 192, 0.05);
  --accent-a08: rgba(119, 186, 192, 0.08);
  --accent-a10: rgba(119, 186, 192, 0.1);
  --accent-a13: rgba(119, 186, 192, 0.13);
  --accent-a15: rgba(119, 186, 192, 0.15);
  --accent-a20: rgba(119, 186, 192, 0.2);
  --accent-a30: rgba(119, 186, 192, 0.3);
  --accent-a40: rgba(119, 186, 192, 0.4);

  --mint-a05: rgba(0, 212, 170, 0.05);
  --mint-a10: rgba(0, 212, 170, 0.1);
  --mint-a20: rgba(0, 212, 170, 0.2);
  --coral-a05: rgba(255, 107, 107, 0.05);
  --coral-a10: rgba(255, 107, 107, 0.1);
  --coral-a15: rgba(255, 107, 107, 0.15);
  --coral-a20: rgba(255, 107, 107, 0.2);
  --gold-a08: rgba(255, 181, 71, 0.08);
  --gold-a10: rgba(255, 181, 71, 0.1);
  --gold-a15: rgba(255, 181, 71, 0.15);
  --gold-a20: rgba(255, 181, 71, 0.2);

  --text-on-color: #ffffff;
  --overlay: rgba(0, 0, 0, 0.55);

  --radius: 8px;
  --max-width: 1280px;
  --content-width: 800px;

  --shadow-soft: 0 2px 16px -4px rgba(0, 0, 0, 0.4);
  --shadow-medium: 0 8px 32px -8px rgba(0, 0, 0, 0.5);
  --shadow-large: 0 20px 60px -12px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 40px rgba(119, 186, 192, 0.15);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 8px 32px -8px rgba(0, 0, 0, 0.5);
  --shadow-popup: 0 12px 40px rgba(0, 0, 0, 0.4);
  --shadow-accent: 0 0 20px rgba(119, 186, 192, 0.3);

  --gradient-primary: linear-gradient(135deg, #77bac0 0%, #5a9da3 100%);
  --gradient-subtle: linear-gradient(135deg, #13131f 0%, #1a1a2a 100%);
  --gradient-overlay: linear-gradient(135deg, rgba(119, 186, 192, 0.06) 0%, rgba(119, 186, 192, 0.1) 100%);
  --gradient-mesh:
    radial-gradient(at 0% 0%, rgba(119, 186, 192, 0.08) 0%, transparent 50%),
    radial-gradient(at 100% 100%, rgba(119, 186, 192, 0.06) 0%, transparent 50%);
  --gradient-accent: linear-gradient(135deg, #77bac0, #5a9da3);
  --gradient-publish: linear-gradient(135deg, #00d4aa, #00a88a);

  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-bounce: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ── Light Theme ── */
[data-theme='light'] {
  --primary: #6c5ce7;
  --primary-light: #a29bfe;
  --primary-dark: #5a4bd1;
  --accent: #6c5ce7;
  --accent-lt: #a29bfe;

  --bg: #ffffff;
  --bg-dark: #f7f7fb;
  --bg-card: #ffffff;
  --bg-panel: #f9f9fc;
  --bg-hover: rgba(108, 92, 231, 0.04);

  --text: #1a1a2e;
  --text-mid: #64648c;
  --text-dim: #9898b8;

  --border: #e8e8f0;
  --border-lt: #f0f0f8;

  --mint: #00b894;
  --coral: #e17055;
  --gold: #fdcb6e;

  --accent-a05: rgba(108, 92, 231, 0.05);
  --accent-a08: rgba(108, 92, 231, 0.08);
  --accent-a10: rgba(108, 92, 231, 0.1);
  --accent-a13: rgba(108, 92, 231, 0.13);
  --accent-a15: rgba(108, 92, 231, 0.15);
  --accent-a20: rgba(108, 92, 231, 0.2);
  --accent-a30: rgba(108, 92, 231, 0.3);
  --accent-a40: rgba(108, 92, 231, 0.4);

  --mint-a05: rgba(0, 184, 148, 0.05);
  --mint-a10: rgba(0, 184, 148, 0.1);
  --mint-a20: rgba(0, 184, 148, 0.2);
  --coral-a05: rgba(225, 112, 85, 0.05);
  --coral-a10: rgba(225, 112, 85, 0.1);
  --coral-a15: rgba(225, 112, 85, 0.15);
  --coral-a20: rgba(225, 112, 85, 0.2);
  --gold-a08: rgba(253, 203, 110, 0.08);
  --gold-a10: rgba(253, 203, 110, 0.1);
  --gold-a15: rgba(253, 203, 110, 0.15);
  --gold-a20: rgba(253, 203, 110, 0.2);

  --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
  --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.06), 0 12px 40px rgba(0, 0, 0, 0.04);
  --shadow-large: 0 8px 32px rgba(0, 0, 0, 0.08), 0 20px 60px rgba(0, 0, 0, 0.05);
  --shadow-glow: 0 0 40px rgba(108, 92, 231, 0.08);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08);
  --shadow-popup: 0 8px 32px rgba(0, 0, 0, 0.08);
  --shadow-accent: 0 0 40px rgba(108, 92, 231, 0.08);

  --gradient-primary: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
  --gradient-subtle: linear-gradient(135deg, #f9f9fc 0%, #f0f0f8 100%);
  --gradient-overlay: linear-gradient(135deg, rgba(108, 92, 231, 0.03) 0%, rgba(108, 92, 231, 0.06) 100%);
  --gradient-mesh:
    radial-gradient(at 0% 0%, rgba(108, 92, 231, 0.06) 0%, transparent 50%),
    radial-gradient(at 100% 100%, rgba(108, 92, 231, 0.04) 0%, transparent 50%);
  --gradient-accent: linear-gradient(135deg, #6c5ce7, #a29bfe);
  --gradient-publish: linear-gradient(135deg, #00b894, #00a88a);
}