/* Natural Hairpedia — Design Tokens
   Ported from natural-hairpedia-design-system v1 (colors_and_type.css).
   Components reference semantic tokens only. */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT@0,9..144,300..900,0..100;1,9..144,300..900,0..100&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ---- Brand palette (locked) ---- */
  --color-plum-900:    #2c1a1d;
  --color-mauve-600:   #a67f8e;
  --color-rose-500:    #c29aa0;
  --color-slate-600:   #687279;
  --color-ink-900:     #111518;
  --color-surface-100: #f4f5f6;
  --color-surface-200: #e9ebec;
  --color-white:       #ffffff;

  /* ---- Extended palette ---- */
  --color-rose-50:     #faf2f3;
  --color-rose-100:    #f1dcdf;
  --color-rose-700:    #9c7880;
  --color-mauve-300:   #d6c4ca;
  --color-ink-700:     #3a3f44;
  --color-ink-500:     #5a6168;
  --color-hairline:    #e2e2e2;
  --color-success:     #2f7a4a;
  --color-warning:     #b26a1d;
  --color-danger:      #a52a1a;
  --color-focus:       #2563eb;

  --color-success-bg:  #eaf4ee;
  --color-warning-bg:  #fbf1e3;
  --color-danger-bg:   #f9e5e2;

  /* ---- Semantic ---- */
  --bg-canvas:          var(--color-white);
  --bg-subtle:          var(--color-surface-100);
  --bg-muted:           var(--color-surface-200);
  --bg-inverse:         var(--color-plum-900);
  --bg-tinted:          var(--color-rose-50);

  --text-primary:       var(--color-ink-900);
  --text-secondary:     var(--color-ink-700);
  --text-muted:         var(--color-ink-500);
  --text-on-inverse:    var(--color-white);
  --text-on-accent:     var(--color-white);
  --text-link:          var(--color-rose-700);
  --text-link-hover:    var(--color-plum-900);

  --accent-primary:       var(--color-rose-500);
  --accent-primary-hover: var(--color-rose-700);
  --accent-secondary:     var(--color-mauve-600);

  --border-subtle: var(--color-hairline);
  --border-strong: var(--color-ink-900);
  --border-focus:  var(--color-focus);

  /* ---- Type families ---- */
  --font-display: "Fraunces", "Recoleta", Georgia, serif;
  --font-body:    "Inter", "Helvetica Neue", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* ---- Type scale ---- */
  --text-display-xl: clamp(2.75rem, 5vw, 4.5rem);
  --text-display-l:  clamp(2.25rem, 4vw, 3.5rem);
  --text-display-m:  clamp(1.75rem, 3vw, 2.5rem);
  --text-heading-l:  1.75rem;
  --text-heading-m:  1.375rem;
  --text-heading-s:  1.125rem;
  --text-body-l:     1.125rem;
  --text-body-m:     1rem;
  --text-body-s:     0.9375rem;
  --text-caption:    0.8125rem;
  --text-eyebrow:    0.75rem;

  --leading-display: 1.05;
  --leading-heading: 1.2;
  --leading-body:    1.6;
  --leading-tight:   1.3;

  /* ---- Spacing (4px base) ---- */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  /* ---- Layout ---- */
  --content-narrow: 68ch;
  --content-wide:   1120px;
  --content-full:   1320px;

  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1536px;

  /* ---- Radii ---- */
  --radius-xs:   4px;
  --radius-s:    8px;
  --radius-m:    12px;
  --radius-l:    20px;
  --radius-pill: 9999px;

  /* ---- Elevation (warm-tinted, not gray) ---- */
  --shadow-xs: 0 1px 2px  rgba(44, 26, 29, 0.06);
  --shadow-s:  0 2px 8px  rgba(44, 26, 29, 0.08);
  --shadow-m:  0 8px 24px rgba(44, 26, 29, 0.10);
  --shadow-l:  0 16px 48px rgba(44, 26, 29, 0.14);

  /* ---- Motion ---- */
  --ease-standard:   cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --duration-fast:   120ms;
  --duration-base:   200ms;
  --duration-slow:   320ms;
}