/* Lerni Design System - global entry point.
   Token files are concatenated at build time: CSS @import is serialized, so the
   previous import chain cost one round trip per file before any paint.
   The Raleway request now lives in a <link> in each page's <head>. */


/* ---- tokens/fonts.css ---- */
/* Raleway is the Lerni text face (confirmed: the only family embedded in
   "Lerni - Support Early Learning.pdf" — Regular/Medium/SemiBold/Bold/ExtraBold).
   Served from Google Fonts; no self-hosted binaries were supplied. */


/* The wordmark is set in Georgia Bold (see assets/logo.svg: font-family
   "Georgia, Times New Roman, serif", weight 900, letter-spacing -1).
   Georgia is a system face, so no @font-face is required. */

/* ---- tokens/colors.css ---- */
:root{
  /* Brand — sampled pixel-exact from the supplied logo + favicon files */
  --lerni-rose-600:#e11d48;      /* primary brand rose (logo full stop, all CTAs) */
  --lerni-plum-900:#2d1b2e;      /* wordmark ink, dark sections */

  /* Rose ramp (rose-600 is Tailwind rose-600 exactly; ramp follows that scale) */
  --rose-50:#fff1f2;
  --rose-100:#ffe4e6;
  --rose-200:#fecdd3;
  --rose-300:#fda4af;
  --rose-400:#fb7185;
  --rose-500:#f43f5e;
  --rose-600:#e11d48;
  --rose-700:#be123c;
  --rose-800:#9f1239;
  --rose-900:#881337;

  /* Plum ramp — tinted neutrals derived from the wordmark ink */
  --plum-50:#faf7fa;
  --plum-100:#f3eef3;
  --plum-200:#e5dde5;
  --plum-300:#c8bcc9;
  --plum-400:#9a8a9c;
  --plum-500:#6f5d71;
  --plum-600:#544356;
  --plum-700:#3f2f41;
  --plum-800:#362637;
  --plum-900:#2d1b2e;
  --plum-950:#1d1020;

  /* Warm paper — the off-white the print collateral sits on */
  --paper:#fdfbf9;
  --white:#ffffff;

  /* Semantic — surfaces */
  --surface-page:var(--white);
  --surface-muted:var(--plum-50);
  --surface-card:var(--white);
  --surface-card-muted:var(--plum-100);
  --surface-inverse:var(--plum-900);
  --surface-inverse-soft:var(--plum-800);
  --surface-accent:var(--rose-600);
  --surface-accent-soft:var(--rose-50);

  /* Semantic — text */
  --text-heading:var(--plum-900);
  --text-body:var(--plum-700);
  --text-muted:var(--plum-500);
  --text-subtle:var(--plum-400);
  --text-accent:var(--rose-600);
  --text-on-dark:#f6f2f6;
  --text-on-dark-muted:#c8bcc9;
  --text-on-accent:var(--white);

  /* Semantic — lines */
  --border-subtle:var(--plum-200);
  --border-strong:var(--plum-300);
  --border-accent:var(--rose-600);
  --border-on-dark:rgba(255,255,255,.16);

  /* Semantic — interaction */
  --action-primary:var(--rose-600);
  --action-primary-hover:var(--rose-700);
  --action-primary-active:var(--rose-800);
  --action-ink:var(--plum-900);
  --action-ink-hover:var(--plum-950);
  --focus-ring:rgba(225,29,72,.35);

  /* Status — no status palette exists in the brand sources; these are
     conservative additions so forms can report state. */
  --status-success:#15803d;
  --status-warning:#b45309;
  --status-error:var(--rose-700);
  --status-info:var(--plum-600);
}

/* ---- tokens/typography.css ---- */
:root{
  /* Families */
  --font-display:Georgia,"Times New Roman",serif;   /* wordmark + editorial accents */
  --font-sans:"Raleway",-apple-system,"Segoe UI",sans-serif;  /* everything else */
  --font-mono:ui-monospace,"SFMono-Regular",Menlo,monospace;

  /* Weights — Raleway ships 300..800; the brand leans on 400 / 600 / 800 */
  --weight-light:300;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-extrabold:800;

  /* Sizes */
  --text-eyebrow:13px;      /* uppercase kicker above every section heading */
  --text-xs:13px;
  --text-sm:15px;
  --text-base:17px;         /* marketing body copy */
  --text-lg:19px;
  --text-xl:22px;
  --text-2xl:26px;
  --text-3xl:32px;
  --text-4xl:40px;
  --text-5xl:52px;
  --text-6xl:64px;
  --text-display:76px;      /* hero h1 */

  /* Line heights */
  --leading-tight:1.08;
  --leading-snug:1.2;
  --leading-heading:1.14;
  --leading-normal:1.45;
  --leading-relaxed:1.65;   /* body paragraphs */

  /* Tracking */
  --tracking-eyebrow:.18em; /* the wide-set uppercase labels in the PDF */
  --tracking-wide:.06em;
  --tracking-normal:0;
  --tracking-tight:-.02em;
  --tracking-display:-.03em;
}

/* ---- tokens/spacing.css ---- */
:root{
  --space-0:0;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;--space-7:28px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;
  --space-32:128px;

  /* Layout */
  --container-max:1200px;
  --container-narrow:760px;   /* prose measure */
  --gutter:24px;
  --section-y:112px;          /* vertical rhythm between marketing sections */
  --section-y-tight:72px;
  --nav-height:80px;
}

/* ---- tokens/radius.css ---- */
:root{
  --radius-none:0;
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;      /* default card */
  --radius-xl:24px;      /* large feature panels */
  --radius-pill:999px;   /* buttons, chips, eyebrow capsules */
  --border-width:1px;
  --border-width-thick:2px;
  --rule-accent-width:3px; /* rose rule under section headings */
}

/* ---- tokens/elevation.css ---- */
:root{
  /* Soft, low-contrast, plum-tinted. Never neutral grey/black shadows. */
  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(45,27,46,.06);
  --shadow-sm:0 2px 8px rgba(45,27,46,.06);
  --shadow-md:0 8px 24px rgba(45,27,46,.08);
  --shadow-lg:0 18px 48px rgba(45,27,46,.10);
  --shadow-accent:0 10px 28px rgba(225,29,72,.22);
  --shadow-inset-hairline:inset 0 0 0 1px var(--border-subtle);
  --blur-panel:14px;
}

/* ---- tokens/motion.css ---- */
:root{
  --duration-fast:120ms; /* @kind other */
  --duration-base:200ms; /* @kind other */
  --duration-slow:320ms; /* @kind other */
  --duration-reveal:520ms; /* @kind other */
  --ease-standard:cubic-bezier(.2,.6,.2,1); /* @kind other */
  --ease-out:cubic-bezier(0,0,.2,1); /* @kind other */
  --ease-in-out:cubic-bezier(.4,0,.2,1); /* @kind other */
  --lift-hover:-2px;      /* cards rise 2px on hover */
  --press-scale:.985; /* @kind other */     /* buttons compress slightly on press */
}

/* ---- tokens/base.css ---- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-relaxed);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4,h5,h6{margin:0;color:var(--text-heading);font-family:var(--font-sans);font-weight:var(--weight-extrabold);line-height:var(--leading-heading);letter-spacing:var(--tracking-tight)}
h1{font-size:var(--text-5xl);letter-spacing:var(--tracking-display)}
h2{font-size:var(--text-4xl)}
h3{font-size:var(--text-2xl)}
h4{font-size:var(--text-xl)}
p{margin:0 0 1em}
a{color:var(--text-accent);text-decoration:none;transition:color var(--duration-fast) var(--ease-standard)}
a:hover{color:var(--rose-700)}
strong{font-weight:var(--weight-bold);color:var(--text-heading)}
em{font-style:italic}
:focus-visible{outline:2px solid var(--action-primary);outline-offset:2px}
::selection{background:var(--rose-100);color:var(--plum-900)}
.lerni-container{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)}