/* ===========================================================
   GetParentWise Design System — Design Tokens
   Single-file CSS custom properties. Drop into any project and
   import once at the root. All oklch values resolved to hex so
   they survive tooling that can't parse oklch().

   Brand ground truth: Rich Purple #6B4CA3 · Cream #F5F1E8 · Deep Black #1A1A1A
   Fonts: Playfair Display (display) + Work Sans (body/UI)
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Work+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
  /* ---------- COLOR · brand ---------- */
  --purple-500: #6B4CA3;   /* brand accent */
  --cream-50:   #F5F1E8;     /* brand page surface */
  --black-900:  #1A1A1A;    /* brand text */

  /* ---------- COLOR · purple scale ---------- */
  --purple-50:  #F3EFFE;
  --purple-100: #E3DCFD;
  --purple-200: #C8BAF3;
  --purple-300: #A892E1;
  --purple-400: #8267C0;
  --purple-600: #493277;
  --purple-700: #332057;
  --purple-800: #21133B;
  --purple-900: #120924;

  /* ---------- COLOR · warm neutrals (never pure gray) ---------- */
  --neutral-0:   #FFFEFB;
  --neutral-50:  #F5F1E8;
  --neutral-100: #EDE7DD;
  --neutral-200: #DCD3C6;
  --neutral-300: #BCAFA0;
  --neutral-400: #94867A;
  --neutral-500: #6F645B;
  --neutral-600: #4E4640;
  --neutral-700: #332C29;
  --neutral-800: #191513;
  --neutral-900: #1A1A1A;

  /* ---------- COLOR · status ---------- */
  --green-500: #307A4F;  --green-100: #D6EFDE;
  --amber-500: #B07A20;  --amber-100: #FAE4C7;
  --red-500:   #A74541;    --red-100:   #FFDEDB;
  --blue-500:  #3E6C9B;   --blue-100:  #D9EAFC;

  /* ---------- COLOR · semantic aliases (use these, not the scales) ---------- */
  --surface-page:         var(--cream-50);
  --surface-raised:       var(--neutral-0);
  --surface-card:         var(--neutral-0);
  --surface-sunken:       var(--neutral-100);
  --surface-inverse:      var(--black-900);
  --surface-brand:        var(--purple-500);
  --surface-brand-subtle: var(--purple-50);

  --text-primary:    var(--black-900);
  --text-secondary:  var(--neutral-600);
  --text-tertiary:   var(--neutral-400);
  --text-on-brand:   var(--cream-50);
  --text-on-inverse: var(--cream-50);
  --text-brand:      var(--purple-500);
  --text-link:       var(--purple-500);
  --text-link-hover: var(--purple-600);

  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-500);
  --border-brand:   var(--purple-500);
  --border-focus:   var(--purple-400);

  --accent:              var(--purple-500);
  --accent-hover:        var(--purple-600);
  --accent-active:       var(--purple-700);
  --accent-subtle:       var(--purple-50);
  --accent-subtle-hover: var(--purple-100);

  --status-success: var(--green-500);  --status-success-bg: var(--green-100);
  --status-warning: var(--amber-500);  --status-warning-bg: var(--amber-100);
  --status-danger:  var(--red-500);    --status-danger-bg:  var(--red-100);
  --status-info:    var(--blue-500);   --status-info-bg:    var(--blue-100);

  --focus-ring: var(--purple-400);

  /* ---------- TYPE · families ---------- */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---------- TYPE · scale (spacious register) ---------- */
  --font-size-display-xl: clamp(2.75rem, 4.25rem, 5rem);
  --font-size-display-lg: clamp(2.25rem, 3rem, 3.5rem);
  --font-size-display-md: clamp(1.75rem, 2.1rem, 2.5rem);
  --font-size-display-sm: 1.75rem;    /* 28px */
  --font-size-heading-lg: 1.5rem;     /* 24px */
  --font-size-heading-md: 1.25rem;    /* 20px */
  --font-size-heading-sm: 1.0625rem;  /* 17px */
  --font-size-body-lg:    1.125rem;   /* 18px */
  --font-size-body-md:    1rem;       /* 16px */
  --font-size-body-sm:    0.875rem;   /* 14px */
  --font-size-caption:    0.75rem;    /* 12px */

  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  /* ---------- SPACE ---------- */
  --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;
  --space-32: 128px;

  --content-max-width: 1120px;
  --content-max-width-narrow: 720px;
  --section-padding-y: var(--space-24);
  --section-padding-y-sm: var(--space-12);

  /* ---------- RADII ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;    /* inputs, small controls */
  --radius-lg: 14px;   /* cards */
  --radius-xl: 22px;
  --radius-2xl: 32px;
  --radius-full: 999px; /* pills, tags, avatars, primary button */

  /* ---------- SHADOWS (warm-tinted, low elevation) ---------- */
  --shadow-sm: 0 1px 2px rgba(56, 48, 43, 0.06);
  --shadow-md: 0 4px 16px rgba(56, 48, 43, 0.08), 0 1px 3px rgba(56, 48, 43, 0.06);
  --shadow-lg: 0 12px 32px rgba(56, 48, 43, 0.10), 0 2px 6px rgba(56, 48, 43, 0.06);
  --shadow-focus: 0 0 0 3px rgba(130, 103, 192, 0.35);
  --shadow-inset: inset 0 1px 2px rgba(56, 48, 43, 0.06);

  /* ---------- MOTION (fades + gentle easing only, no bounce) ---------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 360ms;

  /* ===========================================================
     EDITORIAL DENSITY REGISTER
     One-pagers, print, slides, dense dashboards. Same colors,
     different rhythm. Page surface flips to --neutral-0.
     =========================================================== */
  --font-size-micro:    9px;     /* eyebrows, over-line labels */
  --font-size-label:    10px;    /* section rules, pill labels */
  --font-size-fine:     11.5px;  /* supporting copy */
  --font-size-dense:    12.5px;  /* dense item titles */
  --font-size-dense-lg: 14.5px;  /* dense body copy — print floor */
  --font-size-stat:     26px;    /* stat numerals */

  --tracking-label:       0.16em;
  --tracking-label-loose: 0.18em;
  --tracking-label-wider: 0.22em;
  --tracking-display-tight: -0.025em;
  --tracking-stat: -0.02em;

  --leading-dense: 1.3;
  --leading-fine:  1.45;

  --hairline: 1px solid var(--border-subtle);
  --hairline-accent: 1px solid var(--purple-200);
  --rule-accent: var(--purple-200);
  --accent-bar-height: 5px;

  --space-dense-1: 3px;  --space-dense-2: 7px;  --space-dense-3: 9px;
  --space-dense-4: 14px; --space-dense-5: 20px; --space-dense-6: 26px;

  --radius-badge: 6px;
  --dot-size: 4px;
}

/* ---------- Base resets the system assumes ---------- */
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--font-size-body-md);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--weight-semibold); line-height: var(--leading-snug); margin: 0; }
a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); text-decoration: underline; }
*, *::before, *::after { box-sizing: border-box; }