/* ===========================================================================
   AI LEARN — Design System  ·  colors_and_type.css
   Multiproduktion Norden AB · "AI Learn Brand Kit" (BrandGuard 1.1)
   ---------------------------------------------------------------------------
   Source of truth: ai-learn-platform/app/globals.css (Tailwind 4 @theme).
   This file restates those tokens as plain CSS custom properties so they can
   be used in any static HTML artifact (decks, marketing pages, mocks).

   Two layers:
     1. BASE TOKENS   — raw palette + type scale + spacing/radii/shadow.
     2. SEMANTIC VARS — h1/h2/body/eyebrow/label/code roles + surface roles.

   Fonts: Geist Sans (UI + display), Geist Mono (prose / "AI voice" moments),
   Caveat (coach handwriting / whiteboard accent). All three are real brand
   fonts loaded in production via next/font; here they load from Google Fonts.
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500;600&family=Caveat:wght@400;600;700&display=swap');

:root {
  /* ---------------------------------------------------------------------
   * 1 · BASE TOKENS
   * ------------------------------------------------------------------- */

  /* — Surfaces & ink (warm neutrals) — the system reads on warm paper,
       never pure white page backgrounds. White is reserved for cards/chrome. */
  --paper:        #f6f4ef;   /* app/marketing background */
  --white:        #ffffff;   /* cards, top bars, inputs */

  --ink-900:      #1a1a1f;   /* primary text */
  --ink-700:      #3a3640;   /* body strong */
  --ink-600:      #4f4b55;
  --ink-500:      #6a6670;   /* secondary text */
  --ink-400:      #8e8a94;   /* tertiary / eyebrow / placeholder */
  --ink-300:      #b7b3bd;
  --ink-100:      #e9e6ee;

  --line-strong:  #d8d2c4;   /* outline buttons, strong dividers */
  --line:         #e8e4dc;   /* default hairline borders */
  --line-soft:    #efece5;   /* faint fills / zebra */

  /* — Brand purple (primary). 700 is THE Multiproduktion purple
       (themeColor, selection, primary CTA). Scale derived around it. */
  --purple-50:    #f7f3fb;
  --purple-100:   #f5f0fa;   /* soft fills, "soft" button bg, icon chips */
  --purple-200:   #e4d8ef;
  --purple-300:   #c9b3dd;
  --purple-500:   #8a5bb0;
  --purple-600:   #76489e;
  --purple-700:   #65358b;   /* ★ canonical brand purple */
  --purple-800:   #4d2569;   /* primary hover, deep accents */
  --purple-900:   #371a4d;   /* darkest, near-ink purple */

  /* — Clay (complementary warm accent). Drafts, secondary highlights,
       "human"/editorial warmth against the cool purple. */
  --clay-50:      #faf3e6;
  --clay-100:     #f3e8d6;
  --clay-300:     #dcb786;
  --clay-500:     #b88a4a;
  --clay-700:     #7a5a30;

  /* — Status: forest (positive / published) & rose (error / destructive) */
  --forest-100:   #d1e7dd;
  --forest-500:   #157347;
  --forest-700:   #0f5132;

  --rose-100:     #fce7f3;
  --rose-500:     #be185d;
  --rose-700:     #9d174d;

  /* — Teaching-color convention (coach whiteboard / diagrams).
       Fixed semantics so meaning stays consistent across lessons. */
  --teach-problem:  #ef4444;  /* red    = problem */
  --teach-solution: #16a34a;  /* green  = solution */
  --teach-neutral:  #2563eb;  /* blue   = neutral */
  --teach-default:  #1a1612;  /* black  = default ink */

  /* — Typefaces ------------------------------------------------------- */
  --font-sans:    "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Geist", system-ui, -apple-system, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-hand:    "Caveat", "Segoe Script", cursive;

  /* — Type scale (display-tight headings → relaxed body) -------------- */
  --text-eyebrow:   11px;  /* mono, uppercase, tracked */
  --text-xs:        12px;
  --text-sm:        13px;
  --text-base:      15px;
  --text-lg:        18px;
  --text-xl:        22px;
  --text-2xl:       26px;  /* PageHead title */
  --text-3xl:       32px;
  --text-4xl:       44px;
  --text-5xl:       60px;
  --text-6xl:       80px;  /* hero / marketing display */
  --text-7xl:      104px;

  --leading-tight:  1.08;
  --leading-snug:   1.2;
  --leading-normal: 1.55;

  --tracking-display: -0.02em;  /* tighten large display */
  --tracking-tight:   -0.01em;
  --tracking-eyebrow:  0.18em;  /* mono eyebrows / labels */
  --tracking-button:   0.2em;   /* uppercase pill CTAs */

  /* — Radii — soft but not bubbly. Pills for CTAs, xl for cards/inputs. */
  --radius-sm:    6px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-2xl:   24px;
  --radius-pill:  999px;

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

  /* — Elevation — sparse, layered. NEVER a soft blurry drop-shadow:
       a 1px contact line + a tight ambient shadow. */
  --shadow-card:   0 1px 0 rgba(26,26,31,.04), 0 1px 2px rgba(26,26,31,.04);
  --shadow-raised: 0 1px 0 rgba(26,26,31,.04), 0 4px 12px rgba(26,26,31,.06);
  --shadow-float:  0 12px 32px rgba(26,26,31,.1);

  /* — Motion — calm, decisive. Standard ease is the material curve. */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   160ms;
  --dur-base:   240ms;
  --dur-slow:   320ms;

  /* ---------------------------------------------------------------------
   * 2 · SEMANTIC ALIASES
   * ------------------------------------------------------------------- */
  --bg:            var(--paper);
  --surface:       var(--white);
  --fg:            var(--ink-900);
  --fg-muted:      var(--ink-500);
  --fg-subtle:     var(--ink-400);
  --border:        var(--line);
  --border-strong: var(--line-strong);

  --primary:       var(--purple-700);
  --primary-hover: var(--purple-800);
  --primary-soft:  var(--purple-100);
  --on-primary:    var(--white);
  --accent:        var(--clay-500);
  --positive:      var(--forest-700);
  --negative:      var(--rose-700);

  --selection-bg:  var(--purple-700);
  --selection-fg:  var(--white);
}

/* ===========================================================================
   SEMANTIC TYPOGRAPHY ROLES
   Apply as classes, or copy the declarations. Mirrors the codebase usage:
   display titles in Geist tight; body in Geist; "AI voice"/meta in Geist Mono;
   eyebrows & labels in uppercase tracked mono; handwriting for coach moments.
   =========================================================================== */

.ds-display {            /* marketing hero */
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 7vw, var(--text-7xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg);
  text-wrap: balance;
}
.ds-h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg);
  text-wrap: balance;
}
.ds-h2 {                 /* PageHead title scale */
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  text-wrap: balance;
}
.ds-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.ds-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--ink-700);
}
.ds-small {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-muted);
}
/* Geist Mono "voice" — AI output, scenario briefs, tagline-length copy. */
.ds-mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--ink-700);
}
/* Uppercase tracked eyebrow / kicker above titles. */
.ds-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-subtle);
}
/* Form / metadata label. */
.ds-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--fg-subtle);
}
.ds-code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--line-soft);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
  color: var(--ink-700);
}
.ds-hand {               /* coach handwriting / whiteboard ink */
  font-family: var(--font-hand);
  font-weight: 600;
  color: var(--teach-default);
}

::selection { background: var(--selection-bg); color: var(--selection-fg); }