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

/* Inter (@fontsource) — self-hosted substitute for NotionInter */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/inter-700.woff2") format("woff2"); }

:root {
  /* --- Surface --- */
  --canvas-soft: #f6f5f4;
  --surface: #ffffff;
  --surface-2: #f2f2f1;
  --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-red: #d33a2b;     /* status: failed / error (ON_OFF.md decision) */
  --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;

  /* Font-family is baked into each token below: the CSS `font` shorthand
     resets font-family to the UA default (serif) unless a family is written,
     and it cannot carry letter-spacing — so weights/sizes ship inline and the
     family is appended per token. */
  --type-display-1: 700 48px/1.05 var(--font-family);
  --type-heading-1: 700 32px/1.1 var(--font-family);
  --type-heading-2: 700 22px/1.27 var(--font-family);
  --type-title: 600 17px/1.4 var(--font-family);
  --type-body-md: 400 15px/1.5 var(--font-family);
  --type-body-sm: 400 14px/1.4 var(--font-family);
  --type-button: 500 15px/1.4 var(--font-family);
  --type-caption: 400 13px/1.43 var(--font-family);
  --type-eyebrow: 600 12px/1.33 var(--font-family);

  /* --- 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;
}

/* Dark mode — flip the semantic tokens only (components use var(--…)). */
[data-theme="dark"] {
  --canvas-soft: #141518;
  --surface: #1c1e22;
  --surface-2: #24262c;
  --hairline: #33363d;
  --ink: #f5f6f7;
  --ink-secondary: #dcdee2;
  --ink-muted: #a9adb6;
  --ink-faint: #727680;
  --primary: #3d8be0;
  --primary-active: #5d9ff0;
  --on-primary: #ffffff;
  --secondary: #10142a;
  --shadow-level-1: rgba(0, 0, 0, 0.45) 0 1px 3px;
  --shadow-level-2: rgba(0, 0, 0, 0.55) 0 5px 22px;
}

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