/**
 * TaskViaMe design tokens.
 *
 * The identity comes from the logo: black, white, and one lime — #D1FD0B, sampled from the tick and
 * from "Via". Components never reference those raw values. They use semantic names
 * (`--surface-card`, `--accent-text`), so this file re-skins every screen without touching a
 * component.
 *
 * Lime is loud, and that decides how it may be used. It is a *fill* — the primary button, the active
 * tab, the create button — always with near-black text on it. It is never a text colour on a light
 * surface: #D1FD0B on white is 1.2:1 and simply unreadable. Where the brand hue has to be read as
 * text in the light theme, `--accent-text` supplies a deep olive from the same hue that passes AA.
 *
 * Direction-neutral by construction: nothing here names a side.
 */

:root {
  /* ---- Brand primitives ---------------------------------------------------------------- */

  /* Neutrals with a trace of warmth instead of a stock slate's blue cast, so the greys sit beside
     the lime rather than fighting it. 1000 is the near-black of the logo's own background. */
  --tvm-ink-50: #f7f7f5;
  --tvm-ink-100: #efefec;
  --tvm-ink-200: #e2e2de;
  --tvm-ink-300: #c9c9c4;
  --tvm-ink-400: #a0a09a;
  --tvm-ink-500: #8c8c86;
  --tvm-ink-600: #6b6b66;
  --tvm-ink-700: #42423e;
  --tvm-ink-800: #2a2a27;
  --tvm-ink-850: #1c1c1a;
  --tvm-ink-900: #121211;
  --tvm-ink-950: #0a0a09;
  --tvm-ink-1000: #050505;

  /* 400 is the logo. The scale around it exists for hover, pressed, soft backgrounds and the olive
     text shades that stay legible on white. */
  --tvm-lime-50: #fafee0;
  --tvm-lime-100: #f2fec2;
  --tvm-lime-200: #e6fe8a;
  --tvm-lime-300: #dcfd52;
  --tvm-lime-400: #d1fd0b;
  --tvm-lime-500: #b9e300;
  --tvm-lime-600: #93b500;
  --tvm-lime-700: #6f8900;
  --tvm-lime-800: #4c5e00;
  --tvm-lime-900: #2f3a04;
  --tvm-lime-950: #1c2305;

  /* ---- Semantic surface and text (light) ----------------------------------------------- */

  --surface-page: var(--tvm-ink-50);
  --surface-card: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: var(--tvm-ink-100);
  --surface-inverse: var(--tvm-ink-950);
  --surface-hover: var(--tvm-ink-100);
  --surface-pressed: var(--tvm-ink-200);
  --surface-overlay: rgb(10 10 9 / 0.45);
  /* Translucent chrome — the phone header and tab bar — blurred over the content scrolling under. */
  --surface-glass: rgb(247 247 245 / 0.82);
  --skeleton-shine: rgb(255 255 255 / 0.65);

  --border-subtle: var(--tvm-ink-200);
  --border-strong: var(--tvm-ink-300);

  --text-primary: var(--tvm-ink-900);
  --text-secondary: var(--tvm-ink-700);
  --text-muted: var(--tvm-ink-600);
  --text-inverse: #ffffff;
  --text-on-accent: var(--tvm-ink-950);

  --accent: var(--tvm-lime-400);
  --accent-hover: var(--tvm-lime-500);
  --accent-pressed: var(--tvm-lime-600);
  --accent-soft: var(--tvm-lime-100);
  --accent-border: var(--tvm-lime-600);
  /* The brand hue as readable text: 7.2:1 on white, 6.8:1 on --accent-soft. */
  --accent-text: var(--tvm-lime-800);

  --focus-ring: var(--tvm-lime-700);
  --focus-soft: rgb(111 137 0 / 0.22);

  /* ---- Status colours ------------------------------------------------------------------
     One family per stage of the work, so a card's stage reads at a glance and its label says which
     step within it:

       before it starts   cool      — grey draft, sky sent, blue viewed, teal accepted
       while it is worked yellow    — in progress bright, waiting for an answer amber, paused faded
       under review       violet    — submitted, and magenta when changes are asked for
       how it ended       white / red — completed goes quiet as a plain card; cancelled is red

     Overdue is the one filled red pill: the only state that asks somebody to step in now. The
     roles' own colours (owner green, supervisor orange, assignee yellow) mark people, not cards;
     in-progress sharing the assignee's yellow is deliberate, since it means the move is theirs.

     Four tokens per state: `fg`/`bg` for the pill (each pair at least 4.5:1), `tint`/`edge` for a
     card in that state. */

  --status-draft-fg: var(--tvm-ink-700);
  --status-draft-bg: var(--tvm-ink-100);
  --status-draft-tint: var(--tvm-ink-50);
  --status-draft-edge: var(--tvm-ink-200);
  --status-sent-fg: #0369a1;
  --status-sent-bg: #e0f2fe;
  --status-sent-tint: #f0f9ff;
  --status-sent-edge: #bae6fd;
  --status-viewed-fg: #1d4ed8;
  --status-viewed-bg: #dbeafe;
  --status-viewed-tint: #eff6ff;
  --status-viewed-edge: #bfdbfe;
  --status-accepted-fg: #0f766e;
  --status-accepted-bg: #ccfbf1;
  --status-accepted-tint: #f0fdfa;
  --status-accepted-edge: #99f6e4;
  --status-declined-fg: #9f1239;
  --status-declined-bg: #f5f5f4;
  --status-declined-tint: #fafaf9;
  --status-declined-edge: #e7e5e4;
  --status-in_progress-fg: #854d0e;
  --status-in_progress-bg: #fef08a;
  --status-in_progress-tint: #fefce8;
  --status-in_progress-edge: #facc15;
  --status-blocked-fg: #92400e;
  --status-blocked-bg: #fde68a;
  --status-blocked-tint: #fffbeb;
  --status-blocked-edge: #fbbf24;
  --status-paused-fg: #6b6139;
  --status-paused-bg: #efe9d2;
  --status-paused-tint: #faf8f0;
  --status-paused-edge: #e0d8b8;
  --status-submitted-fg: #6d28d9;
  --status-submitted-bg: #ede9fe;
  --status-submitted-tint: #f5f3ff;
  --status-submitted-edge: #c4b5fd;
  --status-needs_revision-fg: #a21caf;
  --status-needs_revision-bg: #fae8ff;
  --status-needs_revision-tint: #fdf4ff;
  --status-needs_revision-edge: #f0abfc;
  --status-completed-fg: var(--tvm-ink-900);
  --status-completed-bg: #ffffff;
  --status-completed-tint: var(--surface-card);
  --status-completed-edge: var(--tvm-ink-200);
  /* White on white needs an outline, and the dot keeps the logo's tick. */
  --status-completed-ring: var(--tvm-ink-300);
  --status-completed-dot: var(--tvm-lime-700);
  --status-cancelled-fg: #b91c1c;
  --status-cancelled-bg: #fee2e2;
  --status-cancelled-tint: #fef2f2;
  --status-cancelled-edge: #fecaca;
  --status-overdue-fg: #ffffff;
  --status-overdue-bg: #dc2626;
  --status-overdue-tint: #fef2f2;
  --status-overdue-edge: #ef4444;

  /* ---- Role colours --------------------------------------------------------------------
     These mark **people**, never cards, which is why they are a separate family from the statuses
     above: a green name and a green pill would otherwise look like the same claim about two
     different things.

     A role is a position in one task's chain, not a job title — the same person is the owner of what
     they hand out and the assignee of what they are handed. Green asked for the work, orange took it
     and passed it on, yellow is holding it. A helper is grey on purpose: they were asked into the
     conversation and own no part of the work, and a colour of their own would suggest otherwise.

     Each pair is at least 4.5:1, so the name stays readable rather than decorative. */

  --role-owner-fg: #15803d;
  --role-owner-bg: #dcfce7;
  --role-manager-fg: #9a3412;
  --role-manager-bg: #fed7aa;
  --role-supervisor-fg: #c2410c;
  --role-supervisor-bg: #ffedd5;
  --role-assignee-fg: #854d0e;
  --role-assignee-bg: #fef9c3;
  --role-helper-fg: var(--tvm-ink-700);
  --role-helper-bg: var(--tvm-ink-100);

  /* ---- The card's conversation ----------------------------------------------------------
     Who is speaking, by the colour agreed for their part in the work: the side that asked for it
     green, the side doing it yellow. An internal note is neither — it is the workspace talking to
     itself — so it stays neutral and says so in words. */

  --bubble-sender-bg: #dcfce7;
  --bubble-sender-edge: #86efac;
  --bubble-assignee-bg: #fef9c3;
  --bubble-assignee-edge: #fde047;
  --bubble-internal-bg: var(--tvm-ink-100);
  --bubble-internal-edge: var(--tvm-ink-300);
  /* One colour per person in a group chat (2026-10-23): their lines and their name, so a run of
     voices reads apart. The reader's own lines keep --bubble-sender-*. */
  --person-1-bg: #dbeafe; --person-1-edge: #93c5fd; --person-1-text: #1d4ed8;
  --person-2-bg: #fce7f3; --person-2-edge: #f9a8d4; --person-2-text: #be185d;
  --person-3-bg: #ede9fe; --person-3-edge: #c4b5fd; --person-3-text: #6d28d9;
  --person-4-bg: #ffedd5; --person-4-edge: #fdba74; --person-4-text: #c2410c;
  --person-5-bg: #ccfbf1; --person-5-edge: #5eead4; --person-5-text: #0f766e;
  --person-6-bg: #fee2e2; --person-6-edge: #fca5a5; --person-6-text: #b91c1c;
  --priority-low: var(--tvm-ink-400);
  --priority-normal: var(--tvm-ink-600);
  --priority-high: #d97706;
  --priority-urgent: #e11d48;

  --danger: #be123c;
  --danger-soft: #ffe4e6;
  /* A filled destructive button. Separate from --danger because the dark theme's readable red text
     is too light to carry white text as a fill. */
  --danger-solid: #be123c;
  --text-on-danger: #ffffff;
  --success: var(--tvm-lime-800);
  --warning: #b45309;

  /* ---- Shape, depth, motion ------------------------------------------------------------ */

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* Generous and consistent. The logo's app tile is a rounded square, and the controls echo it. */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgb(10 10 9 / 0.05);
  --shadow-md: 0 6px 16px -4px rgb(10 10 9 / 0.1);
  --shadow-lg: 0 18px 44px -8px rgb(10 10 9 / 0.18);
  /* The create button's lift. Tinted by the lime it sits under rather than plain grey. */
  --shadow-accent: 0 8px 20px -6px rgb(111 137 0 / 0.55);

  /* The minimum comfortable target for a finger, applied to every control on a phone. */
  --touch-target: 44px;

  /* One family for both scripts. Readex Pro's Latin is drawn from Lexend and its Arabic was designed
     alongside it, so an Arabic sentence with an English name in it reads as one voice. */
  --font-sans: 'Readex Pro Variable', 'Readex Pro', ui-sans-serif, system-ui, -apple-system,
    'Segoe UI', Roboto, 'Noto Sans Arabic', Tahoma, sans-serif;

  /* Motion is short and decelerating: things arrive quickly and settle, never bounce around. */
  --duration-instant: 90ms;
  --duration-fast: 150ms;
  --duration-normal: 240ms;
  --duration-slow: 360ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.45, 0.64, 1);
}

/**
 * Dark theme.
 *
 * True near-black, as in the logo, rather than a navy "dark mode". On the phones this product lives
 * on that is also an OLED screen drawing almost nothing.
 *
 * Defined for both the explicit choice and the system preference, so somebody who never opened
 * settings still gets the theme their operating system asked for. The two blocks must stay equal.
 */

:root[data-theme="dark"] {
  --surface-page: var(--tvm-ink-1000);
  --surface-card: var(--tvm-ink-900);
  --surface-raised: var(--tvm-ink-850);
  --surface-sunken: var(--tvm-ink-850);
  --surface-inverse: var(--tvm-ink-50);
  --surface-hover: var(--tvm-ink-850);
  --surface-pressed: var(--tvm-ink-800);
  --surface-overlay: rgb(0 0 0 / 0.62);
  --surface-glass: rgb(5 5 5 / 0.78);
  --skeleton-shine: rgb(255 255 255 / 0.05);

  --border-subtle: var(--tvm-ink-800);
  --border-strong: var(--tvm-ink-700);

  --text-primary: var(--tvm-ink-50);
  --text-secondary: var(--tvm-ink-300);
  --text-muted: var(--tvm-ink-500);
  --text-inverse: var(--tvm-ink-900);
  --text-on-accent: var(--tvm-ink-950);

  --accent: var(--tvm-lime-400);
  --accent-hover: var(--tvm-lime-300);
  --accent-pressed: var(--tvm-lime-500);
  --accent-soft: var(--tvm-lime-950);
  --accent-border: var(--tvm-lime-800);
  --accent-text: var(--tvm-lime-400);

  --focus-ring: var(--tvm-lime-400);
  --focus-soft: rgb(209 253 11 / 0.2);

  --status-draft-fg: var(--tvm-ink-300);
  --status-draft-bg: var(--tvm-ink-850);
  --status-draft-tint: var(--tvm-ink-900);
  --status-draft-edge: var(--tvm-ink-800);
  --status-sent-fg: #7dd3fc;
  --status-sent-bg: #0b2533;
  --status-sent-tint: #0a1a24;
  --status-sent-edge: #12384d;
  --status-viewed-fg: #93c5fd;
  --status-viewed-bg: #14213d;
  --status-viewed-tint: #0d1628;
  --status-viewed-edge: #1e3a66;
  --status-accepted-fg: #5eead4;
  --status-accepted-bg: #082a27;
  --status-accepted-tint: #071d1b;
  --status-accepted-edge: #0f3f3a;
  --status-declined-fg: #fda4af;
  --status-declined-bg: var(--tvm-ink-850);
  --status-declined-tint: var(--tvm-ink-900);
  --status-declined-edge: var(--tvm-ink-800);
  --status-in_progress-fg: #fde047;
  --status-in_progress-bg: #3a3208;
  --status-in_progress-tint: #1c1905;
  --status-in_progress-edge: #8a7410;
  --status-blocked-fg: #fcd34d;
  --status-blocked-bg: #3d2c06;
  --status-blocked-tint: #1f1705;
  --status-blocked-edge: #7a5a0d;
  --status-paused-fg: #d6cfa8;
  --status-paused-bg: #2b281c;
  --status-paused-tint: #181612;
  --status-paused-edge: #3d3927;
  --status-submitted-fg: #c4b5fd;
  --status-submitted-bg: #221a3d;
  --status-submitted-tint: #15102a;
  --status-submitted-edge: #3b2f6b;
  --status-needs_revision-fg: #f0abfc;
  --status-needs_revision-bg: #3b0f40;
  --status-needs_revision-tint: #200a24;
  --status-needs_revision-edge: #5e1a66;
  --status-completed-fg: var(--tvm-ink-950);
  --status-completed-bg: var(--tvm-ink-50);
  --status-completed-tint: var(--surface-card);
  --status-completed-edge: var(--tvm-ink-800);
  --status-completed-ring: transparent;
  --status-completed-dot: var(--tvm-lime-700);
  --status-cancelled-fg: #fca5a5;
  --status-cancelled-bg: #3b1111;
  --status-cancelled-tint: #1f0909;
  --status-cancelled-edge: #5a1a1a;
  --status-overdue-fg: #ffffff;
  --status-overdue-bg: #dc2626;
  --status-overdue-tint: #230a0a;
  --status-overdue-edge: #b91c1c;

  /* Roles, in the dark. Same meaning, lifted off a dark surface rather than printed on a light one. */
  --role-owner-fg: #86efac;
  --role-owner-bg: #0d2c1a;
  --role-manager-fg: #fb923c;
  --role-manager-bg: #4a2409;
  --role-supervisor-fg: #fdba74;
  --role-supervisor-bg: #3a1e08;
  --role-assignee-fg: #fde68a;
  --role-assignee-bg: #362b06;
  --role-helper-fg: var(--tvm-ink-700);
  --role-helper-bg: var(--tvm-ink-100);

  --bubble-sender-bg: #0d2c1a;
  --bubble-sender-edge: #1d5334;
  --bubble-assignee-bg: #2c2708;
  --bubble-assignee-edge: #5c4f0d;
  --bubble-internal-bg: var(--tvm-ink-850);
  --bubble-internal-edge: var(--tvm-ink-700);
  --person-1-bg: #10233f; --person-1-edge: #1e3a6b; --person-1-text: #93c5fd;
  --person-2-bg: #3a1229; --person-2-edge: #6b1f48; --person-2-text: #f9a8d4;
  --person-3-bg: #24183f; --person-3-edge: #43307a; --person-3-text: #c4b5fd;
  --person-4-bg: #3a1f0b; --person-4-edge: #6b3a12; --person-4-text: #fdba74;
  --person-5-bg: #0c2e2a; --person-5-edge: #155e56; --person-5-text: #5eead4;
  --person-6-bg: #3a1212; --person-6-edge: #6b1f1f; --person-6-text: #fca5a5;
  --priority-low: var(--tvm-ink-600);
  --priority-normal: var(--tvm-ink-400);
  --priority-high: #f59e0b;
  --priority-urgent: #fb7185;

  --danger: #fb7185;
  --danger-soft: #3a1219;
  --danger-solid: #e11d48;
  --text-on-danger: #ffffff;
  --success: var(--tvm-lime-400);
  --warning: #fbbf24;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5);
  --shadow-md: 0 6px 16px -4px rgb(0 0 0 / 0.6);
  --shadow-lg: 0 18px 44px -8px rgb(0 0 0 / 0.7);
  --shadow-accent: 0 8px 24px -6px rgb(209 253 11 / 0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-page: var(--tvm-ink-1000);
    --surface-card: var(--tvm-ink-900);
    --surface-raised: var(--tvm-ink-850);
    --surface-sunken: var(--tvm-ink-850);
    --surface-inverse: var(--tvm-ink-50);
    --surface-hover: var(--tvm-ink-850);
    --surface-pressed: var(--tvm-ink-800);
    --surface-overlay: rgb(0 0 0 / 0.62);
    --surface-glass: rgb(5 5 5 / 0.78);
    --skeleton-shine: rgb(255 255 255 / 0.05);

    --border-subtle: var(--tvm-ink-800);
    --border-strong: var(--tvm-ink-700);

    --text-primary: var(--tvm-ink-50);
    --text-secondary: var(--tvm-ink-300);
    --text-muted: var(--tvm-ink-500);
    --text-inverse: var(--tvm-ink-900);
    --text-on-accent: var(--tvm-ink-950);

    --accent: var(--tvm-lime-400);
    --accent-hover: var(--tvm-lime-300);
    --accent-pressed: var(--tvm-lime-500);
    --accent-soft: var(--tvm-lime-950);
    --accent-border: var(--tvm-lime-800);
    --accent-text: var(--tvm-lime-400);

    --focus-ring: var(--tvm-lime-400);
    --focus-soft: rgb(209 253 11 / 0.2);

    --status-draft-fg: var(--tvm-ink-300);
    --status-draft-bg: var(--tvm-ink-850);
    --status-draft-tint: var(--tvm-ink-900);
    --status-draft-edge: var(--tvm-ink-800);
    --status-sent-fg: #7dd3fc;
    --status-sent-bg: #0b2533;
    --status-sent-tint: #0a1a24;
    --status-sent-edge: #12384d;
    --status-viewed-fg: #93c5fd;
    --status-viewed-bg: #14213d;
    --status-viewed-tint: #0d1628;
    --status-viewed-edge: #1e3a66;
    --status-accepted-fg: #5eead4;
    --status-accepted-bg: #082a27;
    --status-accepted-tint: #071d1b;
    --status-accepted-edge: #0f3f3a;
    --status-declined-fg: #fda4af;
    --status-declined-bg: var(--tvm-ink-850);
    --status-declined-tint: var(--tvm-ink-900);
    --status-declined-edge: var(--tvm-ink-800);
    --status-in_progress-fg: #fde047;
    --status-in_progress-bg: #3a3208;
    --status-in_progress-tint: #1c1905;
    --status-in_progress-edge: #8a7410;
    --status-blocked-fg: #fcd34d;
    --status-blocked-bg: #3d2c06;
    --status-blocked-tint: #1f1705;
    --status-blocked-edge: #7a5a0d;
    --status-paused-fg: #d6cfa8;
    --status-paused-bg: #2b281c;
    --status-paused-tint: #181612;
    --status-paused-edge: #3d3927;
    --status-submitted-fg: #c4b5fd;
    --status-submitted-bg: #221a3d;
    --status-submitted-tint: #15102a;
    --status-submitted-edge: #3b2f6b;
    --status-needs_revision-fg: #f0abfc;
    --status-needs_revision-bg: #3b0f40;
    --status-needs_revision-tint: #200a24;
    --status-needs_revision-edge: #5e1a66;
    --status-completed-fg: var(--tvm-ink-950);
    --status-completed-bg: var(--tvm-ink-50);
    --status-completed-tint: var(--surface-card);
    --status-completed-edge: var(--tvm-ink-800);
    --status-completed-ring: transparent;
    --status-completed-dot: var(--tvm-lime-700);
    --status-cancelled-fg: #fca5a5;
    --status-cancelled-bg: #3b1111;
    --status-cancelled-tint: #1f0909;
    --status-cancelled-edge: #5a1a1a;
    --status-overdue-fg: #ffffff;
    --status-overdue-bg: #dc2626;
    --status-overdue-tint: #230a0a;
    --status-overdue-edge: #b91c1c;

  /* Roles, in the dark. Same meaning, lifted off a dark surface rather than printed on a light one. */
  --role-owner-fg: #86efac;
  --role-owner-bg: #0d2c1a;
  --role-manager-fg: #fb923c;
  --role-manager-bg: #4a2409;
  --role-supervisor-fg: #fdba74;
  --role-supervisor-bg: #3a1e08;
  --role-assignee-fg: #fde68a;
  --role-assignee-bg: #362b06;
  --role-helper-fg: var(--tvm-ink-700);
  --role-helper-bg: var(--tvm-ink-100);

    --bubble-sender-bg: #0d2c1a;
    --bubble-sender-edge: #1d5334;
    --bubble-assignee-bg: #2c2708;
    --bubble-assignee-edge: #5c4f0d;
    --bubble-internal-bg: var(--tvm-ink-850);
    --bubble-internal-edge: var(--tvm-ink-700);
    --person-1-bg: #10233f; --person-1-edge: #1e3a6b; --person-1-text: #93c5fd;
    --person-2-bg: #3a1229; --person-2-edge: #6b1f48; --person-2-text: #f9a8d4;
    --person-3-bg: #24183f; --person-3-edge: #43307a; --person-3-text: #c4b5fd;
    --person-4-bg: #3a1f0b; --person-4-edge: #6b3a12; --person-4-text: #fdba74;
    --person-5-bg: #0c2e2a; --person-5-edge: #155e56; --person-5-text: #5eead4;
    --person-6-bg: #3a1212; --person-6-edge: #6b1f1f; --person-6-text: #fca5a5;
    --priority-low: var(--tvm-ink-600);
    --priority-normal: var(--tvm-ink-400);
    --priority-high: #f59e0b;
    --priority-urgent: #fb7185;

    --danger: #fb7185;
    --danger-soft: #3a1219;
    --danger-solid: #e11d48;
    --text-on-danger: #ffffff;
    --success: var(--tvm-lime-400);
    --warning: #fbbf24;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5);
    --shadow-md: 0 6px 16px -4px rgb(0 0 0 / 0.6);
    --shadow-lg: 0 18px 44px -8px rgb(0 0 0 / 0.7);
    --shadow-accent: 0 8px 24px -6px rgb(209 253 11 / 0.4);
  }
}