/* ============================================================
   Family Home Lab — Design Tokens
   Source: DESIGN.md (Notion design language)
   Only structural/semantic tokens here. All values map 1:1.
   ============================================================ */

:root {
  /* --- Surface --- */
  --canvas-soft: #f6f5f4;
  --surface: #ffffff;
  --hairline: #e6e6e6;

  /* --- Text --- */
  --ink: #000000;
  --ink-secondary: #31302e;
  --ink-muted: #615d59;
  --ink-faint: #a39e98;

  /* --- Structural accents --- */
  --primary: #0075de;          /* the ONLY action colour */
  --primary-active: #005bab;
  --on-primary: #ffffff;
  --secondary: #213183;        /* deep indigo — login band + greeting only */

  /* --- Sticker palette (decorative only) --- */
  --sticker-sky: #62aef0;      /* chat */
  --sticker-purple: #d6b6f6;   /* image */
  --sticker-pink: #ff64c8;     /* video */
  --sticker-orange: #dd5b00;   /* audio */
  --sticker-teal: #2a9d99;     /* docs */
  --sticker-green: #1aae39;    /* status: online/saved */
  --sticker-purple-deep: #391c57; /* illustration only */
  --sticker-orange-deep: #793400; /* illustration only */

  /* --- Typography (Inter, self-hosted via @font-face) --- */
  --font-family: "Inter", -apple-system, system-ui, "Segoe UI",
    Helvetica, Arial, sans-serif;

  --type-display-1: 48px / 1.05 700 -1.5px;
  --type-heading-1: 32px / 1.1 700 -0.8px;
  --type-heading-2: 22px / 1.27 700 -0.25px;
  --type-title: 17px / 1.4 600 -0.125px;
  --type-body-md: 15px / 1.5 400 0;
  --type-body-sm: 14px / 1.4 400 0;
  --type-button: 15px / 1.4 500 0;
  --type-caption: 13px / 1.43 400 0;
  --type-eyebrow: 12px / 1.33 600 +0.125px;

  /* --- Layout (base unit 8px) --- */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 28px;
  --space-xxl: 32px;

  --container-max: 1200px;

  /* --- Elevation --- */
  --shadow-level-1: rgba(0, 0, 0, 0.01) 0 0.175px 1px,
    rgba(0, 0, 0, 0.02) 0 0.8px 3px,
    rgba(0, 0, 0, 0.027) 0 2px 8px,
    rgba(0, 0, 0, 0.04) 0 4px 18px;
  --shadow-level-2: rgba(0, 0, 0, 0.0122) 0 0.175px 1px,
    rgba(0, 0, 0, 0.024) 0 0.8px 3px,
    rgba(0, 0, 0, 0.032) 0 2px 8px,
    rgba(0, 0, 0, 0.047) 0 4px 18px,
    rgba(0, 0, 0, 0.05) 0 23px 52px;

  /* --- Shapes --- */
  --rounded-xs: 4px;
  --rounded-sm: 5px;
  --rounded-md: 8px;
  --rounded-lg: 12px;
  --rounded-full: 9999px;
}

/* Numerals: enable OpenType lnum */
html { font-feature-settings: "lnum" 1; }