/* Nuggget color system — mirrors constants/Colors.ts.
   Base palette + tones, then semantic aliases. */
:root {
  /* ---- Brand accents ---- */
  --blue: #1b6ca8;   /* primary SIGNAL — today, links, active tab, selected states */
  --blue-chrome: #17608f;  /* primary SURFACE — the floating header card. One step
                              down from --blue in lightness, same hue, so brand blue
                              stops being wallpaper and accents can outrank it.
                              Never used for anything tappable. */
  --amber: #f5a623;  /* action / mascot / signup */
  --coral: #e8524a;  /* child names, alerts, destructive */
  --green: #2a9d60;  /* confirmed / success */

  /* ---- Ink (text) ramp ---- */
  --ink:  #1a1a2e;   /* primary text + brutalist border */
  --ink2: #6b6560;   /* secondary text */
  --ink3: #8a7f72;   /* tertiary text */
  --ink4: #a8a29d;   /* muted / disabled / inactive */

  /* ---- Surfaces ---- */
  --bg:    #faf9f7;  /* warm off-white app background */
  --cream: #fffbf5;  /* drawer / warm card */
  --bg2:   #f2f0ec;  /* sunken / disabled fill */
  --white: #ffffff;  /* cards */
  --line:  #ece8e3;  /* hairline borders */

  /* ---- Tonal washes (pale accent backgrounds) ---- */
  --blue-lt:  #e8f2fb;
  --amber-bg: #fef7ea;
  --coral-bg: #fef0ef;
  --green-bg: #edf6f1;
  --row-a:    #faf9f7;  /* zebra row A */
  --row-b:    #f6f4f1;  /* zebra row B */
  --amber-dk: #b07a00;  /* readable amber text (on amber-bg) */

  /* ---- Leg / status accents ---- */
  --accepted: #0f9b8e;  /* said-yes teal (cooler than confirmed green) */
  --waiting:  #b07a00;  /* awaiting reply */

  /* ---- Per-child color palette (the 6 swatches offered at signup) ---- */
  --kid-blue:   #4a90e2;
  --kid-coral:  #e8524a;
  --kid-amber:  #f5a623;
  --kid-green:  #7ed321;
  --kid-purple: #9013fe;
  --kid-teal:   #50e3c2;
  /* Fallback when a child has no color yet (ink3 grey). */
  --kid-fallback: #8a7f72;

  /* ================= SEMANTIC ALIASES ================= */
  --color-primary: var(--blue);
  --color-action:  var(--amber);
  --color-danger:  var(--coral);
  --color-success: var(--green);

  --text-primary:   var(--ink);
  --text-secondary: var(--ink2);
  --text-tertiary:  var(--ink3);
  --text-muted:     var(--ink4);
  --text-on-dark:   var(--white);
  --text-link:      var(--blue);

  --surface-page:   var(--bg);
  --surface-card:   var(--white);
  --surface-cream:  var(--cream);
  --surface-sunken: var(--bg2);

  --border-subtle: var(--line);
  --border-strong: var(--ink);
}

/* ---- Per-child band tints (derived, not hand-picked) ----------------------
   The fixed pale washes (--coral-bg, --blue-lt, --amber-bg, --green-bg) are
   status backgrounds and work as such. They do NOT work as per-child band
   tints: --coral #e8524a -> --coral-bg #fef0ef is so light and so hue-shifted
   toward orange that it reads as peach, not as "Jord's colour". The child band
   is the primary identity signal on the Schedule card, so a tint that loses its
   parent hue defeats it.

   Families pick from six kid colours today and will pick more later, so a fixed
   lookup of six tint tokens is the wrong shape. The system wants a RULE:
     child tint = child colour, ~20% over white, hue preserved.
   color-mix in oklab holds hue and perceived lightness far better than an sRGB
   mix, which is what keeps the coral coral instead of sliding to peach.

   Runtime equivalent for colours chosen at signup that aren't one of the six --
   keep in sync:  childTint = (hex) => color-mix(in oklab, hex 20%, white)

   Static fallbacks for contexts that can't use color-mix (older RN targets,
   email, PDF export):
     --kid-purple #9013fe -> #ecdcff    --kid-coral #e8524a -> #fbd8d5
     --kid-blue   #4a90e2 -> #dce9f9    brand blue  #1b6ca8 -> #d9e8f6 */
:root {
  --kid-blue-tint:     color-mix(in oklab, var(--kid-blue)     20%, white);
  --kid-coral-tint:    color-mix(in oklab, var(--kid-coral)    20%, white);
  --kid-amber-tint:    color-mix(in oklab, var(--kid-amber)    20%, white);
  --kid-green-tint:    color-mix(in oklab, var(--kid-green)    20%, white);
  --kid-purple-tint:   color-mix(in oklab, var(--kid-purple)   20%, white);
  --kid-teal-tint:     color-mix(in oklab, var(--kid-teal)     20%, white);
  --kid-fallback-tint: color-mix(in oklab, var(--kid-fallback) 20%, white);

  /* Status wash missing from the original file: --accepted had no background
     partner, so the accepted chip had nowhere to live. */
  --accepted-bg: color-mix(in oklab, var(--accepted) 14%, white);  /* about #e6f5f3 */
}
/* Nuggget typography — mirrors constants/theme.ts fontFamily roles.
   Two families do all the work:
     Nunito  → brand wordmarks, hero greetings, body, numbers (warm + round)
     DM Sans → eyebrows, metadata, helper labels, section headers (clean restraint) */
:root {
  --font-brand: "Nunito", system-ui, sans-serif;   /* used at 800/900 */
  --font-body:  "Nunito", system-ui, sans-serif;
  --font-ui:    "DM Sans", system-ui, sans-serif;   /* labels + headings */

  /* Nunito weight roles (named after the app's fontFamily map) */
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;

  /* DM Sans weight roles */
  --weight-label: 500;     /* eyebrows / metadata */
  --weight-heading: 700;   /* section + event titles */

  /* ---- Type scale (px, app-derived) ---- */
  --text-hero: 52px;       /* wordmark / splash */
  --text-display: 34px;    /* hero greeting, blue header title */
  --text-h2: 24px;         /* screen section headings */
  --text-h3: 18px;         /* card titles */
  --text-title: 16px;      /* event / list titles */
  --text-body: 15px;       /* default body */
  --text-sm: 13px;         /* sub-lines, status */
  --text-meta: 12px;       /* metadata, stats */
  --text-eyebrow: 11px;    /* uppercase eyebrows */

  /* ---- Line heights ---- */
  --leading-display: 38px;
  --leading-body: 1.45;
  --leading-snug: 1.25;

  /* ---- Tracking ---- */
  --tracking-eyebrow: 1.2px;   /* uppercase eyebrows */
  --tracking-section: 1.5px;   /* black uppercase section eyebrows */
  --tracking-display: -0.3px;  /* tighten large brand type */
}
/* Nuggget spacing + radius — mirrors constants/theme.ts spacing/radius
   and constants/nav.ts geometry. 4px base grid. */
:root {
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-base: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-xxl: 32px;
  --space-xxxl: 40px;

  /* Corner radii */
  --radius-none: 0;
  --radius-sm: 8px;
  --radius-md: 12px;     /* buttons */
  --radius-card: 14px;   /* list cards (helper / circle) */
  --radius-lg: 16px;
  --radius-event: 18px;  /* home event cards */
  --radius-chrome: 26px; /* the floating header card + its collapsed pill */
  --radius-full: 999px;  /* pills, capsule nav */

  /* Floating bottom nav geometry */
  --nav-capsule-height: 62px;
  --nav-fab-size: 62px;
  --nav-inset-h: 16px;
  --nav-gap: 12px;
  --nav-capsule-radius: 31px;

  /* Common screen padding */
  --screen-pad: 20px;
}
/* Nuggget effects — the brutalist border + hard-shadow system, plus the
   soft card shadow used on Home cards. Mirrors constants/Colors.ts `brutalist`. */
:root {
  /* ---- Brutalist skin (buttons, nav, primary cards) ---- */
  --border-ink: #1a1a2e;
  --border-w: 3px;                         /* the signature 3px ink border */
  --brutal-shadow:    5px 5px 0 var(--border-ink);   /* hard offset, no blur */
  --brutal-shadow-sm: 3px 3px 0 var(--border-ink);

  /* ---- Soft elevation (secondary cards, e.g. Home event rows) ---- */
  --shadow-card: 0 1px 3px rgba(26, 26, 46, 0.05);
  --shadow-float: 0 5px 12px rgba(26, 26, 46, 0.16);  /* floating nav glass */

  /* Text shadow used on hero brand type over blue */
  --text-shadow-hero: 2px 2px 0 rgba(26, 26, 46, 0.22);

  /* Canonical onboarding / auth background gradient (constants OnbScreen). */
  --gradient-onboarding: linear-gradient(180deg, #2f86c4 0%, #1b6ca8 58%, #15577f 100%);  /* @kind color */
  --gradient-hero: linear-gradient(160deg, #2880bf 0%, #1b6ca8 55%, #185f93 100%);  /* @kind color */

  /* ---- Motion (constants/motion.ts) ---- */
  --dur-fast: 180ms;   /* @kind other */
  --dur-base: 260ms;   /* @kind other */ /* screen transitions */
  --dur-slow: 340ms;   /* @kind other */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);  /* @kind other */ /* smooth, never bouncy */
  --press-scale: 0.97;  /* @kind other */ /* PressableScale default */
}