/* ==========================================================================
   Jakaranda Akademie — design tokens
   Colours read directly from the vector logo. See CLAUDE.md §3.
   Nothing in this file may reference another file; nothing in other files
   may hardcode a hex value.
   ========================================================================== */

:root {
  /* --- Navy ------------------------------------------------------------- */
  --ja-navy: #28265b;
  --ja-navy-deep: #231f55;
  --ja-navy-muted: #2c2b4c;

  /* --- Purple / blossom ramp (dark -> pale) ----------------------------- */
  --ja-purple-dark: #4c3c7a;
  --ja-purple: #6a408f;
  --ja-purple-mid: #78509a;
  --ja-violet: #855fa5;
  --ja-violet-soft: #916ead;
  --ja-lavender: #a37fb9;
  --ja-lavender-mid: #b493c3;
  --ja-lavender-pale: #d9c4de;

  /* --- Gold ------------------------------------------------------------- */
  --ja-gold: #c7a253;
  --ja-gold-deep: #bd9e4f;
  --ja-gold-pale: #f9e6bb;

  /* --- Olive ------------------------------------------------------------ */
  --ja-olive: #686f43;
  --ja-olive-dark: #666f3d;

  /* --- Neutrals --------------------------------------------------------- */
  --ja-cream: #f2e7e3;
  --ja-cream-soft: #f8f1ee;
  --ja-white: #ffffff;

  /* --- Semantic --------------------------------------------------------- */
  --color-bg: var(--ja-cream);
  --color-bg-raised: var(--ja-white);
  --color-text: var(--ja-navy);
  --color-text-muted: #55527a;
  --color-heading: var(--ja-navy-deep);
  --color-link: var(--ja-purple);
  --color-link-hover: var(--ja-purple-dark);
  --color-rule: rgba(40, 38, 91, 0.14);
  --color-focus: var(--ja-purple);

  --color-error: #9b2c3d;
  --color-success: #3d6b4a;

  /* --- Type ------------------------------------------------------------- */
  /* Prototype uses system fallbacks. Self-host Cormorant Garamond + Lato
     into /fonts before production — see CLAUDE.md §3. */
  --font-display: "Cormorant Garamond", "Playfair Display", Georgia,
    "Times New Roman", serif;
  --font-body: "Lato", "Source Sans 3", "Segoe UI", system-ui, -apple-system,
    sans-serif;
  --font-script: "Petit Formal Script", "Parisienne", "Segoe Script",
    "Brush Script MT", cursive;

  /* Fluid type scale */
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-lg: clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
  --fs-xl: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
  --fs-2xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
  --fs-3xl: clamp(2.25rem, 1.8rem + 2.2vw, 3.75rem);

  --lh-tight: 1.15;
  --lh-heading: 1.25;
  --lh-body: 1.65;

  --tracking-wide: 0.08em;
  --tracking-wider: 0.18em;
  --tracking-widest: 0.35em; /* the "AKADEMIE" treatment */

  /* --- Space (0.25rem base) --------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  --section-y: clamp(3rem, 8vw, 6rem);

  /* --- Layout ----------------------------------------------------------- */
  --wrap: 72rem;
  --wrap-narrow: 46rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  /* --- Radius / elevation ----------------------------------------------- */
  --radius-sm: 0.375rem;
  --radius: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(40, 38, 91, 0.06),
    0 2px 8px rgba(40, 38, 91, 0.05);
  --shadow: 0 2px 4px rgba(40, 38, 91, 0.06),
    0 12px 28px rgba(40, 38, 91, 0.09);
  --shadow-lg: 0 4px 8px rgba(40, 38, 91, 0.07),
    0 24px 56px rgba(40, 38, 91, 0.13);

  /* --- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 220ms;

  /* --- Brand gradients --------------------------------------------------- */
  --grad-blossom: linear-gradient(
    135deg,
    var(--ja-purple-dark) 0%,
    var(--ja-purple) 45%,
    var(--ja-violet) 100%
  );
  --grad-navy: linear-gradient(
    170deg,
    var(--ja-navy) 0%,
    var(--ja-navy-deep) 55%,
    var(--ja-purple-dark) 100%
  );
  --grad-gold-rule: linear-gradient(
    90deg,
    transparent,
    var(--ja-gold) 20%,
    var(--ja-gold) 80%,
    transparent
  );
}