/* ============================================================================
   @ramu/design — the CANONICAL design tokens for the whole repo.
   Issue #79 (design-system) + #85 (packages/design). This file is the single
   source of truth; consumers reference it, they don't re-declare the values:
     - apps/landing         — copies it into dist/ at build (see build.mjs)
     - docs/mocks/src        — synced copy (run `pnpm sync:tokens` from root)
     - apps/mobile/src/theme.ts — should mirror this table
   Change --brand (below) and the whole ramp recomputes via color-mix().
   See docs/design-system/README.md for rationale + contrast checks.
   ============================================================================ */

:root {
  /* ============================================================
     BRAND — the one value. Change --brand and every derived color
     below recomputes automatically via color-mix(); nothing else
     in this file (or any base.css that imports it) needs editing.
     Default: pastel sage-green, chosen + contrast-checked 2026-07-03.
     ============================================================ */
  --brand: #3F8F6A;

  /* Derived brand ramp — never hand-edit these, they follow --brand. */
  --brand-strong:      color-mix(in srgb, var(--brand) 78%, black); /* CTA/link/icon text on light bg, focus ring, "success" semantic, avatar slot 1 */
  --brand-strong-2:    color-mix(in srgb, var(--brand) 65%, black); /* CTA gradient's dark stop */
  --brand-tint:        color-mix(in srgb, var(--brand) 14%, white); /* pill/banner/selected-chip bg — safe to put --brand-strong text on this */
  --brand-tint-strong: color-mix(in srgb, var(--brand) 30%, white); /* decorative fill only (progress track) — do NOT put text on this */
  --brand-soft:        color-mix(in srgb, var(--brand) 55%, white); /* decorative/disabled + light-on-dark accent (snackbar Undo) — do NOT use for body text */
  --brand-disabled-1:  color-mix(in srgb, var(--brand) 40%, white); /* disabled CTA gradient, stop 1 */
  --brand-disabled-2:  color-mix(in srgb, var(--brand) 20%, white); /* disabled CTA gradient, stop 2 */

  /* ============================================================
     Entity-type accents (Event / Task / List / Reminder). Deliberately
     NOT derived from --brand — they need to stay visually distinct from
     the brand color and from each other. Muted/soft saturation to match
     the brand's pastel character; see design-system README for the
     contrast table.
     ============================================================ */
  --event-fg: #3B5BDB;    --event-bg: #EAF0FF;    /* blue */
  --task-fg: #8C6208;     --task-bg: #FBF0D9;     /* gold / amber */
  --list-fg: #A83F5A;     --list-bg: #F6ECEE;     /* rose */
  --reminder-fg: #7C4DBD; --reminder-bg: #EDE3FA; /* violet (unchanged) */

  /* ============================================================
     Member avatar palette — deterministic assignment (see
     apps/mobile/src/theme.ts memberColor()). Slot 1 is always the
     brand color; slots 2-6 are fixed hues distinct from brand + each
     other + the entity accents above.
     ============================================================ */
  --member-1: var(--brand-strong);
  --member-2: #BE4622;
  --member-3: #7C4DBD;
  --member-4: #2F6FB0;
  --member-5: #8C6208;
  --member-6: #A83F5A;

  /* Fixed-name mock avatars (Avi / Raj / Nani — the demo family in every mock).
     Raj is violet, not blue: entity-row borders using --avatar-raj sit directly
     next to --event-fg (blue, the Google Calendar / Event accent) on the same
     Home/Tasks screens, and blue-on-blue read as the same color at a glance —
     caught in the 2026-07-03 screenshot spot-check, see design-system README. */
  --avatar-avi: #BE4622;
  --avatar-raj: #7C4DBD;
  --avatar-nani: #C49A1A;

  /* ============================================================
     Neutrals — unaffected by the brand purge, kept as-is.
     ============================================================ */
  --bg: #F5F0E8;
  --surface: #FFFFFF;
  --text: #1C1C1E;
  --text-muted: #8E8E93;
  --label: #A09888;
  --placeholder: #B7B0A4;
  --text-soft: #6b6560;
  --hairline: rgba(0, 0, 0, 0.06);
  --shadow: rgba(0, 0, 0, 0.07);
  --error-bg: #FFE5E5;
  --error-fg: #CC2B2B;
  --back-chip: #F2F0EA;
  --snackbar-bg: #1C1C1E;
  --snackbar-fg: #FFFFFF;
  --snippet-border: #F0E9DC;
  --chevron-muted: #C7C2B8;

  /* ============================================================
     Typography scale (issue #80). Named roles, not raw sizes —
     apps/mobile/src/theme.ts should mirror this table exactly.
     ============================================================ */
  --text-display-size: 27px; --text-display-weight: 800; --text-display-leading: 1.2;  --text-display-tracking: -0.4px;
  --text-title-size: 20px;   --text-title-weight: 600;   --text-title-leading: 1.25;  --text-title-tracking: -0.2px;
  --text-subhead-size: 15px; --text-subhead-weight: 500; --text-subhead-leading: 1.45; --text-subhead-tracking: 0px;
  --text-body-size: 15px;    --text-body-weight: 400;    --text-body-leading: 1.45;    --text-body-tracking: 0px;
  --text-caption-size: 12.5px; --text-caption-weight: 400; --text-caption-leading: 1.4; --text-caption-tracking: 0px;
  --text-label-size: 11px;   --text-label-weight: 700;   --text-label-leading: 1.3;   --text-label-tracking: 0.8px;

  /* ============================================================
     Spacing scale (issue #80). --space-screen-x is kept as a named
     layout constant (the frame's horizontal edge inset) — it is not
     part of the xs..2xl rhythm, it just happens to sit near --space-xl.
     ============================================================ */
  --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-2xl: 32px;
  --space-screen-x: 20px;

  /* ============================================================
     Radius scale — mirrors apps/mobile/src/theme.ts `radius`.
     ============================================================ */
  --radius-field: 16px; --radius-card: 16px; --radius-pill: 26px; --radius-ghost: 24px; --radius-chip: 10px;

  /* ============================================================
     Motion tokens (issue #80) — durations + easing for the
     animations already in the app (snackbar, banners, sheets).
     ============================================================ */
  --duration-fast: 120ms;   /* micro-interactions: checkbox/chip toggle */
  --duration-base: 200ms;   /* default transitions: banner slide-in, sheet push */
  --duration-slow: 320ms;   /* snackbar/bottom-sheet enter-exit, celebration orb */
  --duration-snackbar-hold: 5000ms; /* undo-snackbar auto-dismiss */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);   /* default deceleration */
  --ease-emphasized: cubic-bezier(0.3, 0, 0.1, 1); /* entrances that need more presence */
}

/* ============================================================
   Typography utility classes — apply a full named role in one class.
   ============================================================ */
.text-display { font-size: var(--text-display-size); font-weight: var(--text-display-weight); line-height: var(--text-display-leading); letter-spacing: var(--text-display-tracking); }
.text-title    { font-size: var(--text-title-size);   font-weight: var(--text-title-weight);   line-height: var(--text-title-leading);   letter-spacing: var(--text-title-tracking); }
.text-subhead  { font-size: var(--text-subhead-size); font-weight: var(--text-subhead-weight); line-height: var(--text-subhead-leading); }
.text-body     { font-size: var(--text-body-size);    font-weight: var(--text-body-weight);    line-height: var(--text-body-leading); }
.text-caption  { font-size: var(--text-caption-size); font-weight: var(--text-caption-weight); line-height: var(--text-caption-leading); }
.text-label    { font-size: var(--text-label-size);   font-weight: var(--text-label-weight);   line-height: var(--text-label-leading);   letter-spacing: var(--text-label-tracking); text-transform: uppercase; }

/* ============================================================
   MaterialIcons (issue #81) — self-hosted copy of the exact font
   @expo/vector-icons bundles (node_modules/.../MaterialIcons.ttf),
   so the mocks render pixel-faithful to the real app. No CDN —
   mocks stay fully self-contained/offline like every other asset here.
   Usage: <i class="material-icon">&#xE88A;</i> — codepoints are the
   font's real PUA glyph indices, see docs/design-system/README.md's
   icon mapping table for the full name -> codepoint list.
   ============================================================ */
@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/MaterialIcons.ttf") format("truetype");
}
.material-icon {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  vertical-align: middle;
}

/* ============================================================
   Ramu mark (issue #84) — the two-tone assets/logo/ramu-logo.svg,
   referenced via <img src="../assets/ramu-logo.svg">. Its colors live
   in the SVG file as plain presentation attributes (near-black hat +
   sage two-tone band), NOT currentColor — so an <img> is fine and no
   CSS `color` is needed. Use ../assets/ramu-logo-dark.svg on dark
   surfaces. Stands in everywhere a text-"R" Ramu placeholder used to,
   for the assistant's mark (never for a person's initial avatar —
   those stay as plain letters).
   ============================================================ */
.ramu-mark { display: inline-block; }
.ramu-mark svg { display: block; width: 100%; height: 100%; }