/* Magic Bookmark — global CSS entry point.
   Consumers link ONLY this file. Keep it as @import lines. */
/* Magic Bookmark webfonts */
@font-face{font-family:"Sedan";src:url("../fonts/sedan.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Sedan";src:url("../fonts/sedan-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url("../fonts/nunito-sans.woff2") format("woff2");font-weight:200 1000;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url("../fonts/nunito-sans-italic.woff2") format("woff2");font-weight:200 1000;font-style:italic;font-display:swap}

/* Magic Bookmark — Color tokens
   Two families: Aqua (cool teal, primary) and Brown (warm neutral). Ten shades each, 50→500. */
:root{
  /* ── Aqua ── */
  --aqua-50:#F3F7F7;
  --aqua-100:#F1F6F6;
  --aqua-150:#E7EFEF;
  --aqua-200:#CBDBDC;
  --aqua-250:#95B6B7;
  --aqua-300:#507576;
  --aqua-350:#2B3F40;
  --aqua-400:#192424;
  --aqua-450:#12191A;
  --aqua-500:#111818;

  /* ── Brown ── */
  --brown-50:#F7F4F3;
  --brown-100:#F6F3F2;
  --brown-150:#EFE9E7;
  --brown-200:#DBD0CC;
  --brown-250:#B69E96;
  --brown-300:#755A51;
  --brown-350:#3F312C;
  --brown-400:#241C19;
  --brown-450:#1A1412;
  --brown-500:#181311;

  /* Semantic status (tuned to the two families) */
  --mb-success:#4F6F63;
  --mb-warning:#A97B3F;
  --mb-danger:#9E4A3B;
  --mb-info:var(--aqua-300);

  /* ── Semantic aliases ── */
  --surface-page:var(--brown-50);
  --surface-card:#ffffff;
  --surface-sunken:var(--brown-150);
  --surface-inverse:var(--aqua-400);
  --surface-accent-soft:var(--aqua-150);

  --text-strong:var(--brown-500);
  --text-body:var(--brown-350);
  --text-muted:var(--brown-300);
  --text-faint:var(--brown-250);
  --text-on-brand:var(--aqua-50);
  --text-on-inverse:var(--aqua-150);

  --brand:var(--aqua-300);
  --brand-hover:var(--aqua-350);
  --brand-soft:var(--aqua-150);
  --accent:var(--brown-300);
  --accent-hover:var(--brown-350);

  --border-soft:var(--brown-200);
  --border-strong:var(--brown-250);
  --border-brand:var(--aqua-300);

  --focus-ring:color-mix(in oklch,var(--aqua-300) 55%,transparent);

  /* Legacy aliases — kept so existing components keep resolving */
  --mb-brown:var(--brown-300);
  --mb-brown-700:var(--brown-350);
  --mb-brown-300:var(--brown-250);
  --mb-espresso:var(--brown-500);
  --mb-parchment:var(--brown-200);
  --mb-parchment-200:var(--brown-100);
  --mb-parchment-600:var(--brown-250);
  --mb-slate:var(--aqua-300);
  --mb-slate-700:var(--aqua-350);
  --mb-slate-300:var(--aqua-250);
  --mb-forest:var(--aqua-400);
  --mb-ink-900:var(--brown-500);
  --mb-ink-700:var(--brown-350);
  --mb-ink-500:var(--brown-300);
  --mb-ink-300:var(--brown-250);
  --mb-paper:var(--brown-50);
  --mb-paper-alt:var(--brown-150);
}

/* Magic Bookmark — Typography tokens
   Sedan (serif) for editorial voice lines; Nunito Sans for headings, UI, and body. */
:root{
  --font-serif:"Sedan",Georgia,"Times New Roman",serif;
  --font-sans:"Nunito Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-display:var(--font-sans);
  --font-body:var(--font-sans);

  /* Named styles (see Type cards) */
  --type-serif:1.5rem;          /* serif/regular — Sedan 24 */
  --type-heading-large:1.875rem;/* heading/large — 30 */
  --type-heading-medium:1.25rem;/* heading/medium — 20 */
  --type-body-medium:1rem;      /* body/medium — 16 */
  --type-body-small:0.875rem;   /* body/small — 14 */

  /* Type scale */
  --text-xs:0.75rem;   /* 12 */
  --text-sm:0.875rem;  /* 14 */
  --text-base:1rem;    /* 16 */
  --text-lg:1.125rem;  /* 18 */
  --text-xl:1.25rem;   /* 20 */
  --text-2xl:1.5rem;   /* 24 */
  --text-3xl:1.875rem; /* 30 */
  --text-4xl:2.5rem;   /* 40 */
  --text-5xl:3.5rem;   /* 56 */

  --leading-tight:1.15;
  --leading-snug:1.3;
  --leading-normal:1.55;
  --leading-relaxed:1.75;

  --tracking-tight:-0.01em;
  --tracking-normal:0em;
  --tracking-wide:0.04em;
  --tracking-caps:0.14em;

  --weight-light:300;
  --weight-regular:400;
  --weight-medium:500;
  --weight-bold:700;
  --weight-black:900;
}

/* Magic Bookmark — Spacing, radii, shadow, motion tokens */
:root{
  /* Spacing — base-4 scale, named by px value */
  --spacing-4:4px;
  --spacing-8:8px;
  --spacing-12:12px;
  --spacing-16:16px;
  --spacing-20:20px;
  --spacing-24:24px;
  --spacing-28:28px;
  --spacing-32:32px;
  --spacing-36:36px;
  --spacing-40:40px;
  --spacing-44:44px;
  --spacing-48:48px;

  /* Index aliases (legacy component usage) */
  --space-0:0;
  --space-1:var(--spacing-4);
  --space-2:var(--spacing-8);
  --space-3:var(--spacing-12);
  --space-4:var(--spacing-16);
  --space-5:var(--spacing-24);
  --space-6:var(--spacing-32);
  --space-7:var(--spacing-48);
  --space-8:64px;
  --space-9:96px;

  /* Radii — soft, bookish */
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;
  --radius-xl:24px;
  --radius-pill:999px;

  /* Borders */
  --border-hair:1px;
  --border-thick:2px;

  /* Shadows — low & soft, tinted from brown/500 */
  --shadow-xs:0 1px 2px rgba(24,19,17,0.06);
  --shadow-sm:0 1px 3px rgba(24,19,17,0.08),0 1px 2px rgba(24,19,17,0.05);
  --shadow-md:0 4px 12px rgba(24,19,17,0.10),0 2px 4px rgba(24,19,17,0.05);
  --shadow-lg:0 12px 32px rgba(24,19,17,0.14),0 4px 8px rgba(24,19,17,0.07);
  --shadow-inset:inset 0 1px 2px rgba(24,19,17,0.09);

  /* Motion */
  --ease-standard:cubic-bezier(0.2,0.6,0.2,1); /* @kind other */
  --ease-out:cubic-bezier(0.16,1,0.3,1); /* @kind other */
  --dur-fast:120ms; /* @kind other */
  --dur-base:200ms; /* @kind other */
  --dur-slow:360ms; /* @kind other */
}