/* ============================================================================
   perch design language — application-wide tokens (DEC-0016).
   Every perch surface (overlay notch, future settings window, future widgets)
   builds from these. Component CSS may not invent colors, radii, shadows,
   durations, or easings — it composes tokens.
   ========================================================================== */

@font-face {
  font-family: "Geist";
  src: url("fonts/GeistVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}

:root {
  /* ---- color: the island is pure black, always. ---- */
  --island: #000;
  /* settings-window chrome (Session 12: theming reaches the settings app) */
  --app-bg: #0e0f0e;
  --app-rail: #090a09;

  /* surfaces INSIDE the island: recessed sits below, raised floats above */
  --surface-recessed: #161716;
  --surface-raised: #1e1f1e;

  /* Apple dark-mode text hierarchy (translucent whites read premium on black) */
  --text-primary: #ffffff;
  --text-secondary: rgba(235, 235, 245, 0.62);
  --text-tertiary: rgba(235, 235, 245, 0.35);

  --accent: #5865f2;        /* blurple (Discord contexts) */
  --accent-warm: #e44e49;   /* the date red (DEC-0147: Figma-exact) */
  --danger: #ff383c;        /* destructive/live-off controls (DEC-0147: Figma red) */
  --live: #24d760;          /* speaking / active green (DEC-0147: Figma-exact) */
  --track: rgba(255, 255, 255, 0.18);
  --fill: #ffffff;
  --well: #1b1c1b;          /* recessed track/chip wells (S5: ex-straggler) */
  --hairline: #171717;      /* the page divider line */
  --surface-deep: #101010;  /* deepest inset discs (media empty state) */

  /* hairlines & rims: definition without visible borders */
  --rim: inset 0 0 0 0.5px rgba(255, 255, 255, 0.07);
  --rim-strong: inset 0 0 0 1px rgba(255, 255, 255, 0.12);

  /* ---- elevation ---- */
  --shadow-island: 0 18px 44px rgba(0, 0, 0, 0.55), 0 3px 10px rgba(0, 0, 0, 0.35);
  --shadow-float: 0 4px 14px rgba(0, 0, 0, 0.45);
  --shadow-recess: inset 0 1px 4px rgba(0, 0, 0, 0.55);

  /* ---- geometry ---- */
  --r-chip: 7px;            /* small squares: server icons, action chips */
  --r-card: 12px;           /* inner cards/trays */
  --r-art: 18px;            /* album art */

  /* ---- typography: per the Figma source of truth — INTER, BOLD.
          The earlier "weird" look was light weights (460/620); the design
          uses bold everywhere with 50%-white secondary. Inter is bundled
          full-charset (fully offline); Geist stays as fallback. ---- */
  --font: "Inter", "Geist", -apple-system, "SF Pro Text", "Segoe UI", sans-serif;
  --title-size: 17px;   --title-weight: 700; --title-track: -0.01em;
  --body-size: 13px;    --body-weight: 700;
  --caption-size: 11px; --caption-weight: 700; --caption-track: 0.01em;
  --text-half: rgba(255, 255, 255, 0.5); /* the design's secondary tone */

  /* ---- motion (matches the view runtime's spring character: fast response,
          visible bounce — Apple fluid-interfaces range) ---- */
  --ease-out: cubic-bezier(0.22, 0.9, 0.28, 1);
  --ease-spring: cubic-bezier(0.3, 1.35, 0.5, 1); /* slight overshoot */
  --ease-in: cubic-bezier(0.55, 0.05, 0.75, 0.4);
  --enter-dur: 0.26s;
  --exit-dur: 0.13s;
  --stagger: 24ms;          /* per-element entrance offset */
}

/* ============================================================================
   Color themes (S5): token SETS layered over the graphite base above. Both
   views apply `data-theme` on :root from config /theme; component CSS never
   knows themes exist — it composes the same tokens. Mods inherit for free.
   ========================================================================== */

:root[data-theme="midnight"] {
  --island: #050912;
  --app-bg: #0b101d;
  --app-rail: #070b15;
  --surface-recessed: #121a2c;
  --surface-raised: #1a2338;
  --well: #141b30;
  --hairline: #1c2540;
  --surface-deep: #0b1020;
  --rim: inset 0 0 0 0.5px rgba(170, 200, 255, 0.1);
  --rim-strong: inset 0 0 0 1px rgba(170, 200, 255, 0.16);
}

:root[data-theme="plum"] {
  --island: #0d0614;
  --app-bg: #140b1e;
  --app-rail: #0d0714;
  --surface-recessed: #1c1226;
  --surface-raised: #251a33;
  --well: #1e1428;
  --hairline: #281c38;
  --surface-deep: #120a1c;
  --accent-warm: #d666b8; /* the date accent tints plum with the theme */
  --rim: inset 0 0 0 0.5px rgba(230, 190, 255, 0.09);
  --rim-strong: inset 0 0 0 1px rgba(230, 190, 255, 0.15);
}

:root[data-theme="high-contrast"] {
  --island: #000;
  --app-bg: #0c0c0c;
  --app-rail: #040404;
  --text-secondary: rgba(255, 255, 255, 0.85);
  --text-tertiary: rgba(255, 255, 255, 0.6);
  --text-half: rgba(255, 255, 255, 0.78);
  --track: rgba(255, 255, 255, 0.34);
  --well: #232323;
  --hairline: #303030;
  --surface-deep: #161616;
  --rim: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  --rim-strong: inset 0 0 0 1.5px rgba(255, 255, 255, 0.3);
}

/* base type helpers */
.t-title { font-size: var(--title-size); font-weight: var(--title-weight);
  letter-spacing: var(--title-track); color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-body { font-size: var(--body-size); font-weight: var(--body-weight);
  color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-caption { font-size: var(--caption-size); font-weight: var(--caption-weight);
  letter-spacing: var(--caption-track); color: var(--text-tertiary);
  font-variant-numeric: tabular-nums; }
/* editorial caps: section/context labels ("GENERAL VC", "PLAYING") */
.t-caps { font-size: 9.5px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-tertiary); }