@charset "UTF-8";

:root {
  /* Base palette with a golden accent for the starting person. */
  --palette-blackberry: #190019;
  --palette-aubergine: #2b124c;
  --palette-plum: #522b5b;
  --palette-mauve: #894f6c;
  --palette-rose: #dfb6b2;
  --palette-cream: #fbe4d8;
  --palette-gold: #c49a43;
  --neutral-paper: #f4f1ef;
  --neutral-silver: #d4d0ce;
  --neutral-gray: #a8a3a8;
  --neutral-slate: #58515b;
  --neutral-charcoal: #302c32;
  --neutral-night: #141315;

  /* Fluid scales from ursusmeles/h62-astro, src/styles/tokens.css. */
  --space-3xs: clamp(0.25rem, 0.2292rem + 0.0926vw, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.4792rem + 0.0926vw, 0.5625rem);
  --space-xs: clamp(0.75rem, 0.7083rem + 0.1852vw, 0.875rem);
  --space-s: clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem);
  --space-m: clamp(1.5rem, 1.4375rem + 0.2778vw, 1.6875rem);
  --space-l: clamp(2rem, 1.9167rem + 0.3704vw, 2.25rem);
  --space-xl: clamp(3rem, 2.875rem + 0.5556vw, 3.375rem);
  --space-2xl: clamp(4rem, 3.8333rem + 0.7407vw, 4.5rem);
  --space-3xl: clamp(6rem, 5.75rem + 1.1111vw, 6.75rem);
  --space-3xs-2xs: clamp(0.25rem, 0.1458rem + 0.463vw, 0.5625rem);
  --space-2xs-xs: clamp(0.5rem, 0.375rem + 0.5556vw, 0.875rem);
  --space-xs-s: clamp(0.75rem, 0.625rem + 0.5556vw, 1.125rem);
  --space-s-m: clamp(1rem, 0.7708rem + 1.0185vw, 1.6875rem);
  --space-m-l: clamp(1.5rem, 1.25rem + 1.1111vw, 2.25rem);
  --space-l-xl: clamp(2rem, 1.5417rem + 2.037vw, 3.375rem);
  --space-xl-2xl: clamp(3rem, 2.5rem + 2.2222vw, 4.5rem);
  --space-2xl-3xl: clamp(4rem, 3.0833rem + 4.0741vw, 6.75rem);
  --space-xs-m: clamp(0.75rem, 0.4375rem + 1.3889vw, 1.6875rem);
  --space-s-l: clamp(1rem, 0.5833rem + 1.8519vw, 2.25rem);
  --space-xl-3xl: clamp(3rem, 1.75rem + 5.5556vw, 6.75rem);
  --step-m1: clamp(0.8333rem, 0.8304rem + 0.0129vw, 0.844rem);
  --step-0: clamp(1rem, 0.9659rem + 0.1515vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.1183rem + 0.3632vw, 1.4996rem);
  --step-2: clamp(1.44rem, 1.2875rem + 0.6776vw, 1.999rem);
  --step-3: clamp(1.728rem, 1.4725rem + 1.1354vw, 2.6647rem);
  --step-4: clamp(2.0736rem, 1.6704rem + 1.792vw, 3.552rem);

  --f-display: "Bricolage Grotesque", system-ui, sans-serif;
  --f-body: "Platypi", Georgia, serif;
  --f-ui: var(--f-display);
  --f-regular: 400;
  --f-medium: 500;
  --f-semibold: 600;
  --f-bold: 700;
  --lh-heading: 1.15;
  --lh-label: 1.35;
  --lh-body: 1.6;
  --tracking-heading: -0.035em;
  --tracking-label: 0.08em;

  color-scheme: light dark;
  --paper: light-dark(var(--neutral-paper), var(--neutral-charcoal));
  --canvas: light-dark(color-mix(in oklab, var(--palette-rose) 25%, var(--neutral-silver)), var(--neutral-night));
  --card: light-dark(color-mix(in oklab, var(--palette-cream) 25%, var(--neutral-paper)), color-mix(in oklab, var(--palette-cream) 12%, var(--neutral-silver)));
  --dialog-surface: light-dark(var(--card), var(--neutral-charcoal));
  --dialog-inset: light-dark(var(--card), color-mix(in oklab, var(--neutral-slate) 25%, var(--neutral-charcoal)));
  --ink: light-dark(var(--neutral-night), var(--neutral-paper));
  --muted: light-dark(var(--neutral-slate), var(--neutral-gray));
  --line: light-dark(var(--neutral-slate), var(--neutral-gray));
  --soft-line: light-dark(var(--neutral-silver), var(--neutral-slate));
  --accent: light-dark(var(--palette-plum), color-mix(in oklab, var(--palette-rose) 35%, var(--neutral-silver)));
  --selection: var(--accent);
  --highlight-card: color-mix(in oklab, var(--palette-mauve) 40%, var(--neutral-silver));
  --highlight-ink: var(--neutral-night);
  --highlight-muted: var(--neutral-charcoal);
  --highlight-accent: var(--palette-blackberry);
  --highlight-line: var(--palette-plum);
  --branch-maternal-grandmother: #69866b;
  --branch-maternal-grandfather: #b89b50;
  --branch-paternal-grandmother: #738da9;
  --branch-paternal-grandfather: #b4777d;
  --branch-paternal: color-mix(in oklch shorter hue, var(--branch-paternal-grandmother) 55%, var(--branch-paternal-grandfather));
  --branch-paternal-tint: 45%;
  --branch-descendants: var(--neutral-paper);
  --branch-descendants-card: #fff;
  --branch-neutral-card: light-dark(#d2cfd0, #bab8ba);
  --branch-tint: 35%;
  --branch-muted: var(--neutral-charcoal);
  --root-card: color-mix(in oklab, var(--palette-gold) 55%, var(--neutral-paper));
  --root-muted: var(--neutral-charcoal);
  --branch-toggle-on: light-dark(var(--palette-plum), var(--palette-rose));
  --branch-toggle-on-ink: light-dark(var(--neutral-paper), var(--palette-blackberry));
  --branch-toggle-on-hover: light-dark(var(--palette-aubergine), var(--palette-cream));
  --surface-ink: var(--neutral-night);
  --surface-muted: var(--neutral-slate);
  --surface-accent: color-mix(in oklab, var(--palette-plum) 70%, var(--neutral-charcoal));
  --surface-line: var(--neutral-slate);
  --surface-soft-line: color-mix(in oklab, var(--neutral-slate) 30%, var(--neutral-paper));
  --surface-hover: color-mix(in oklab, var(--palette-rose) 20%, var(--neutral-paper));
  --hover: light-dark(var(--neutral-silver), var(--neutral-slate));
  --dot: light-dark(color-mix(in oklab, var(--neutral-slate) 25%, var(--canvas)), color-mix(in oklab, var(--neutral-slate) 35%, var(--canvas)));
  --shadow-color: var(--neutral-night);
  --shadow-card: 0 0.2rem 0.4rem color-mix(in srgb, var(--shadow-color) 10%, transparent), 0 0.6rem 1.75rem color-mix(in srgb, var(--shadow-color) 6%, transparent);
  --shadow-raised: 0 0.3rem 1rem color-mix(in srgb, var(--shadow-color) 22%, transparent);
  --shadow-dialog: 0 1.25rem 6rem color-mix(in srgb, var(--shadow-color) 40%, transparent);
  --backdrop: color-mix(in srgb, var(--neutral-night) 70%, transparent);

  --control-target: 2.75rem;
  --icon-size: 1.375rem;
  --card-width: 18.5rem;
  --card-inner-fill: 76%;
  --card-min-height: calc(var(--space-3xl) * 2 + var(--space-2xl));
  --radius-small: 0.25rem;
  --radius-medium: 0.625rem;
  --stroke: 1.5px;
  --focus-width: 3px;
  --focus-offset: 4px;
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }