/* ============================================================
   CJ MUSIC ACADEMY — DESIGN TOKENS (Phase 1 foundation)
   CJ Blue #1297FE extracted from the official logo (images/cjlogo.png).
   No orange anywhere in the brand ramp.
   Breakpoints: 360 mobile · 768 tablet · 1024 laptop · 1280 desktop · 1536 large
   ============================================================ */
:root {
  /* Brand */
  --cj-blue: #1297FE;
  --color-primary: #1297FE;
  --color-primary-hover: #0B7FD8;
  --color-primary-active: #0A6CB6;
  --color-primary-light: #E4F3FE;
  --color-primary-glow: rgba(18, 151, 254, 0.35);

  /* Neutrals */
  --color-black: #000000;
  --color-dark: #060D16;
  --color-navy: #0A1C31;
  --color-navy-deep: #040B14;
  --color-white: #FFFFFF;
  --color-background: #F4F7FB;
  --color-surface: #FFFFFF;
  --color-surface-dark: #0A1626;
  --color-border: #DCE5EF;
  --color-border-dark: #1C3249;
  --color-text: #122336;
  --color-text-muted: #5B6B7F;
  --color-text-inverse: #EAF2FA;

  /* Feedback */
  --color-success: #16A34A;
  --color-warning: #D97706;
  --color-danger: #DC2626;

  /* Typography */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Sora", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --leading-tight: 1.15;
  --leading-normal: 1.6;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(4, 11, 20, 0.08);
  --shadow-md: 0 6px 20px rgba(4, 11, 20, 0.12);
  --shadow-lg: 0 18px 50px rgba(4, 11, 20, 0.22);
  --shadow-glow: 0 0 0 4px var(--color-primary-glow), 0 8px 30px rgba(18, 151, 254, 0.45);

  /* Layout */
  --container-sm: 640px;
  --container-md: 960px;
  --container-lg: 1200px;
  --container-xl: 1400px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 160ms;
  --duration-base: 320ms;
  --duration-slow: 640ms;

  /* Layers */
  --z-header: 100;
  --z-sheet: 200;
  --z-toast: 300;
  --z-modal: 400;

  /* ==========================================================
     PHASE 2 — canonical --cj-* names. --color-* above remain as
     aliases so Phase 1 views keep working. New code uses --cj-*.
     ========================================================== */
  --cj-primary: #1297FE;              /* extracted from official logo */
  --cj-primary-hover: #0B7FD8;
  --cj-primary-active: #0A6CB6;
  --cj-primary-soft: #E4F3FE;
  --cj-primary-glow: rgba(18, 151, 254, 0.35);

  --cj-black: #000000;
  --cj-dark: #060D16;
  --cj-navy: #0A1C31;
  --cj-navy-deep: #040B14;

  --cj-white: #ffffff;

  --cj-background: #F4F7FB;
  --cj-surface: #FFFFFF;
  --cj-surface-dark: #0A1626;
  --cj-surface-tint: #EAF2FA;         /* soft blue-tinted surface */

  --cj-text: #122336;
  --cj-text-muted: #5B6B7F;
  --cj-text-inverse: #EAF2FA;

  --cj-border: #DCE5EF;
  --cj-border-dark: #1C3249;

  --cj-success: #16A34A;
  --cj-warning: #D97706;
  --cj-danger: #DC2626;
  --cj-info: #1297FE;

  /* Spacing scale (4 8 12 16 24 32 48 64 80 96 120) */
  --cj-space-1: 0.25rem;
  --cj-space-2: 0.5rem;
  --cj-space-3: 0.75rem;
  --cj-space-4: 1rem;
  --cj-space-5: 1.25rem;
  --cj-space-6: 1.5rem;
  --cj-space-8: 2rem;
  --cj-space-12: 3rem;
  --cj-space-16: 4rem;
  --cj-space-20: 5rem;
  --cj-space-24: 6rem;
  --cj-space-30: 7.5rem;

  /* Type scale hooks (concrete sizes live in base.css) */
  --cj-radius-sm: 6px;
  --cj-radius-md: 10px;
  --cj-radius-lg: 16px;
  --cj-radius-xl: 24px;
  --cj-radius-pill: 999px;

  /* Breakpoint reference (mobile-first; use min-width in order) */
  --cj-bp-sm: 480px;    /* large mobile */
  --cj-bp-md: 768px;    /* tablet */
  --cj-bp-lg: 1024px;   /* laptop */
  --cj-bp-xl: 1280px;   /* desktop */
  --cj-bp-2xl: 1536px;  /* large desktop */

  /* Motion tuning */
  --cj-reveal-distance: 20px;
  --cj-reveal-duration: 550ms;
  --cj-stagger-step: 80ms;
  --cj-lift: -4px;

  /* Future global chrome (Phase 3 owns the values) */
  --cj-header-h: 72px;
}