/* Mavan UI kit · tokens. Every colour, corner, shadow, size and type value the kit and the app use, for light and dark,
 * and the few that Appearance choices swap (corners, font, size). themes.js compiles a theme's own values into the same
 * names at run time (#theme-tokens), so nothing outside this file and themes.js holds a raw value. Names follow ui3
 * (Projects/ui3/ui-kit/kit/src/tokens.css), so a later move to ui3 maps this one file onto a ui3 look.
 * Load order: ui/tokens.css → ui/kit.css → app.css. */

/* John · Project — one stylesheet, organised top to bottom:
 * tokens · base · top bar · stage & panels · toolbar & title · list rows · cells & chips ·
 * pills · popovers · task panel · sidebar · notepad · phones & touch.
 * Rule (docs/UI_RULES.md): components use these tokens only, never raw colours, corners, shadows or
 * type sizes. Names follow ui3 (Projects/ui3/ui-kit/kit/src/tokens.css), so moving to ui3 later means
 * mapping this one block onto a ui3 look. */
:root {
  /* Text */
  --text: #1d1d1f; --text-2: #6e6e73; --text-muted: #aeaeb2; --text-done: #8e8e93; --icon: #8e8e93; --placeholder: #a1a1aa;
  /* Surfaces: page (the canvas panels sit on), sidebar (the layer behind it), card, raised (a selected segment) */
  color-scheme: light;
  --page: #ececf0; --sidebar: #e1e1e7; --card: #fff; --card-sub: #fbfbfd; --card-veil: rgba(255,255,255,.9); --raised: #fff; --fill: #f0f0f4;
  --bar-bg: rgba(255,255,255,.85); --control-hover: rgba(0,0,0,.05); --track: rgba(118,118,128,.12); --track-strong: rgba(118,118,128,.2); --on-track-hover: rgba(255,255,255,.65); --knob: #fff; --knob-shadow: var(--elev-1); /* a switch's knob */
  --button: rgba(118,118,128,.1); --button-hover: rgba(118,118,128,.17); /* plain buttons: the theme's grey, never white */
  --label-brief: #0060c7; --label-report: #7a3fc8; --label-message: #17682f; --label-alert: #855000; /* what kind a thing is, at a glance */
  /* Lines */
  --line: #e5e5ea; --line-card: #e6e6eb; --line-card-hover: #dcdce2; --line-soft: rgba(0,0,0,.06); --weekend: rgba(0,0,0,.025); --line-strong: rgba(0,0,0,.1); --line-cell: #eeeef2; --grip: rgba(0,0,0,.18); --focus-ring: rgba(0,0,0,.3); --drop-line: #8e8e93;
  /* The one accent (John's coral): main buttons, selection, focus, drop targets */
  --accent: #ff6b57; --primary-hover: #f2553f; --accent-text: #f2553f; --accent-tint: #fff1ee; --on-accent: #fff;
  --accent-pick: rgba(255,107,87,.14);
  --on-app: #fff; /* an app's glyph on its coloured tile in the Marketplace, the same in every theme */
  --link: #0a66d6;
  --highlight: #fff1a6; /* ==highlighted== words in the Notepad: a soft marker yellow (Oct 4) */
  /* Meaning: status and priority always pair the colour with a label */
  --danger: #d70015; --danger-tint: #ffebe9; --success: #34c759; --warning: #ff9f0a; --info: #0a84ff;
  --tone-idle: #8e8e93; --tone-active: var(--info); --tone-blocked: var(--warning); --tone-done: var(--success);
  --tone-active-text: #0060c7; --tone-blocked-text: #b26b00; --tone-done-text: #1f8a3d;
  --prio-low: var(--info); --prio-medium: var(--warning); --prio-high: #ff3b30;
  /* File kinds: each kind has its colour, so a file is recognisable at a glance */
  --kind-folder: #3d8ef0; --kind-image: #2fb36e; --kind-pdf: #e5483d; --kind-video: #9b51e0; --kind-audio: #e8457c;
  --kind-text: #6e6e73; --kind-doc: #2f7cf6; --kind-sheet: #1f9d55; --kind-slides: #f08a24; --kind-archive: #a07a52; --kind-other: #8e8e93;
  /* People: an owner's mark takes one of six colours, picked from their name (app.js avatar) */
  --person-1: var(--kind-doc); --person-2: var(--kind-image); --person-3: var(--kind-video); --person-4: var(--kind-slides); --person-5: var(--kind-audio); --person-6: var(--kind-sheet);
  --scrim: rgba(0,0,0,.28);
  /* Inverse: a dark mark on light (selected pills, counts, Stop), light on dark in dark mode */
  --inverse: #1d1d1f; --on-inverse: #fff;
  /* Panel looks (a panel's ⋮ › Look) */
  --look-paper: #ffffff; --look-cream: #fbf6ea; /* always light (the panel carries the light theme) */
  --look-white: #ffffff; --look-cloud: #f5f5f7; --look-mist: #eef1f5; --look-sand: #f8f1e7; --look-blush: #fdece8; --look-sky: #e8f2fd; --look-mint: #e7f6ee; --look-lavender: #efebfa;
  /* Depth: cards are raised off the page; a control's track is set into it; menus float */
  --surface-shadow: 0 1px 2px rgba(0,0,0,.05), 0 1px 1px rgba(0,0,0,.03);
  --surface-shadow-hover: 0 2px 6px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08);
  --raised-shadow: var(--surface-shadow);
  --panel-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 30px rgba(0,0,0,.07);
  --stage-shadow: -1px 0 0 rgba(0,0,0,.05), -14px 0 40px rgba(0,0,0,.1);
  --slide-shadow: -12px 0 40px rgba(0,0,0,.1), -2px 0 8px rgba(0,0,0,.04);
  --shadow: 0 12px 40px rgba(0,0,0,.12), 0 3px 10px rgba(0,0,0,.06);
  --accent-shadow: 0 1px 2px rgba(255,107,87,.3), 0 4px 12px rgba(255,107,87,.25);
  --accent-shadow-hover: 0 2px 4px rgba(255,107,87,.35), 0 8px 20px rgba(255,107,87,.3);
  --selected-glow: 0 0 12px rgba(255,107,87,.22), 0 0 32px rgba(255,107,87,.24), 0 0 64px rgba(255,107,87,.16), 0 10px 30px rgba(255,107,87,.12);
  /* Sizes: one short list, used everywhere */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --radius-small: 6px;    /* icon buttons, menu rows, small marks */
  --radius-control: 10px; /* buttons, fields, segmented tracks, task cards */
  --radius-surface: 12px; /* menus, popovers, drop zones */
  --radius-large: 18px;   /* panels and the stage */
  --radius-full: 999px;   /* chips, tags, status pills */
  --control-sm: 28px; --control-icon: 32px; --control-md: 36px; --control-lg: 44px;
  /* The small parts inside rows and bars, named for what uses them (they don't move with density; --control-* do).
     Today's sizes, kept exactly; evening them out is a design change for the UI kit page. */
  --size-count: 16px;  /* a count on a filter or a home */
  --size-knob: 18px;   /* a switch's knob, a person inside a pill, the designer's checkbox */
  --size-mark: 20px;   /* a person's mark, × on a panel tab, a slider's thumb */
  --size-tag: 22px;    /* a label; the status line's action */
  --size-chip: 24px;   /* a reference chip; a switch */
  --size-close: 26px;  /* a close button; a small pill */
  --size-pill: 30px;   /* a pill */
  --size-title: 34px;  /* a panel's title button */
  --size-face: 32px;   /* a face at the start of a two-line row (a bot, a chat), beside an answer, in a chat's header */
  --size-app: 44px;    /* an app's icon on its Marketplace card */
  --size-app-lg: 64px; /* an app's icon on its own page */
  --size-app-sm: 28px; /* an app's icon in a row (Settings › Connections) */
  --size-rail: 60px;   /* the rail: a slim column of homes (layout.js), and the height of the bottom bar */
  --size-card-max: 720px; /* how wide the cards that come to you get (Home), so a card reads in one glance */
  --size-track: 10px;  /* a slider's track */
  --size-meter: 28px;  /* a meter's track in the top bar (AI headroom) */
  --size-meter-h: 6px; /* how thick a meter's track is */
  --touch: 44px;       /* the least a finger needs (phones and coarse pointers) */
  --row-narrow: 48px;  /* a task card when its panel is phone-narrow */
  --type-micro: 10px; --type-tiny: 11px; --type-meta: 12px; --type-small: 13px; --type-body: 14px; --type-reading: 15px; --type-heading: 16px; --type-panel: 17px;
  --type-subtitle: 20px; --type-page: 22px; --type-title: 28px;
  /* Layout */
  --row: 46px; --indent: 22px; --step: 32px; --bar-h: 56px; --gap: var(--space-3); --side-w: var(--side-user, 320px); /* --side-user: the width dragged on this device */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --font-serif: ui-serif, "New York", "Iowan Old Style", Georgia, serif; /* Pages: the Serif headings choice */
  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-rounded: ui-rounded, "SF Pro Rounded", "Nunito", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Mono", Consolas, monospace;
  --font: var(--font-system);
  --text-glow: none; /* a theme's own (Hacker's phosphor) */
  /* Theme Designer semantics. Only themes.js owns the material recipes; components select a role. */
  --backdrop: var(--page); --backdrop-base: var(--page); --backdrop-size: cover; --photo-blur: 0px; --photo-position: center;
  --stage-bg: var(--page); --pane-border: var(--line-soft); --inner-line: var(--line-cell); --density-pad: 12px; --hover-lift: -1px; --focus-neutral: rgba(0,0,0,.3); --pane-head-h: 50px;
  --sidebar-bg: var(--sidebar); --sidebar-text: var(--text); --sidebar-text-2: var(--text-2); --sidebar-hover: var(--control-hover);
  --sidebar-selected: var(--raised); --sidebar-selected-text: var(--text); --sidebar-selected-shadow: var(--elev-1); --sidebar-icon: var(--text-2);
  --bar-bg-style: var(--bar-bg); --bar-text: var(--text); --glass-blur: 0px; --bar-blur: 18px; --glass-saturate: 150%; --glass-tint: var(--sidebar);
  --font-body: var(--font-system); --font-heading: var(--font-body); --heading-weight: 650; --text-2-on-raised: var(--text);
  --focus-shadow: 0 0 0 2px var(--focus-neutral); --edge-face: 0 0 0 2px var(--face-ring, var(--card)); --edge-inset: inset 0 0 0 1px var(--line-card); --edge-rule: inset 0 -1px 0 var(--line-cell);
  --drop-before: inset 2px 0 0 var(--drop-line); --drop-after: inset -2px 0 0 var(--drop-line);
  --edge-1: inset 0 2px 0 var(--drop-line); --edge-2: inset 0 -2px 0 var(--drop-line); --edge-3: 0 0 0 2px var(--focus-neutral); --edge-4: 0 0 0 4px var(--line); --edge-5: 0 0 0 4px var(--control-hover); --edge-6: inset 0 0 0 1.5px var(--text-done); --edge-7: 0 0 0 2px var(--card), 0 0 0 4px var(--text-2); --edge-8: inset 0 1px 0 var(--line-soft); --edge-9: inset 0 0 0 1px var(--line-soft); --edge-10: 0 0 0 1px var(--p-line); --edge-11: inset 0 0 0 1px var(--line-strong), var(--surface-shadow); --edge-12: inset 0 0 0 1px var(--line-strong); --edge-13: 0 0 0 1px var(--line-strong); --edge-14: 0 0 0 2px var(--card), 0 0 0 4px var(--focus-neutral); --edge-15: inset 0 0 0 1px var(--line-card-hover), var(--surface-shadow); --edge-16: inset 0 0 0 999px var(--accent-tint); --edge-17: inset 0 0 0 999px transparent; --edge-18: 0 0 0 2px var(--card); --edge-19: 0 0 0 2px var(--knob); --edge-20: inset 1px 0 var(--rp-hair); --edge-21: 1px 0 0 var(--line-cell); --edge-22: inset 1px 0 0 var(--line-cell);
}
@media (max-width: 600px), (pointer: coarse) {
  :root { --control-sm: 44px !important; --control-icon: 44px !important; --control-md: 44px !important; --control-lg: 48px !important; }
}
/* Appearance choices (Settings › Appearance; themes.js sets them on <html>): each swaps a few tokens from a fixed list. */
:root[data-corners="sharp"] { --radius-small: 3px; --radius-control: 5px; --radius-surface: 6px; --radius-large: 8px; }
:root[data-corners="round"] { --radius-small: 8px; --radius-control: 14px; --radius-surface: 16px; --radius-large: 24px; }
:root[data-font="rounded"] { --font: var(--font-rounded); }
:root[data-font="serif"] { --font: var(--font-serif); }
:root[data-font="mono"] { --font: var(--font-mono); }
:root[data-size="small"] { --type-micro: 10px; --type-tiny: 10.5px; --type-meta: 11px; --type-small: 12px; --type-body: 13px; --type-reading: 14px; --type-heading: 15px; --type-panel: 16px; --type-subtitle: 18px; --type-page: 20px; --type-title: 25px; }
:root[data-size="large"] { --type-micro: 11px; --type-tiny: 12px; --type-meta: 13px; --type-small: 15px; --type-body: 16px; --type-reading: 17px; --type-heading: 18px; --type-panel: 19px; --type-subtitle: 22px; --type-page: 25px; --type-title: 31px; }
/* Dark mode: the same tokens with dark values. Follows the Mac unless you pick Light or Dark (⋮ › View › Appearance). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --text: #f5f5f7; --text-2: #a1a1a6; --text-muted: #6e6e73; --text-done: #8e8e93; --icon: #98989d; --placeholder: #6e6e73;
  --page: #1c1c1e; --sidebar: #131315; --card: #2c2c2e; --card-sub: #29292b; --card-veil: rgba(44,44,46,.92); --raised: #48484a; --fill: #3a3a3c;
  --bar-bg: rgba(28,28,30,.85); --control-hover: rgba(255,255,255,.08); --track: rgba(118,118,128,.24); --track-strong: rgba(118,118,128,.38); --on-track-hover: rgba(255,255,255,.1); --button: rgba(118,118,128,.22); --button-hover: rgba(118,118,128,.32); --label-brief: #6cb6ff; --label-report: #c39bff; --label-message: #5edb7c; --label-alert: #ffb340;
  --line: #3a3a3c; --line-card: #3a3a3c; --line-card-hover: #4a4a4d; --line-soft: rgba(255,255,255,.08); --weekend: rgba(255,255,255,.03); --line-strong: rgba(255,255,255,.14); --line-cell: #38383a; --grip: rgba(255,255,255,.28); --focus-ring: rgba(255,255,255,.5); --drop-line: #8e8e93;
  --primary-hover: #ff7f6d; --accent-text: #ff8c7b; --accent-tint: rgba(255,107,87,.18); --accent-pick: rgba(255,107,87,.26);
  --link: #5aa9ff; --danger: #ff6961; --danger-tint: rgba(255,69,58,.18); --highlight: rgba(255,214,10,.3);
  --tone-active-text: #6cb6ff; --tone-blocked-text: #ffb340; --tone-done-text: #5edb7c;
  --surface-shadow: 0 1px 2px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.02);
  --surface-shadow-hover: 0 4px 14px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.4);
  --panel-shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.35);
  --stage-shadow: -1px 0 0 rgba(255,255,255,.04), -14px 0 40px rgba(0,0,0,.5);
  --slide-shadow: -12px 0 40px rgba(0,0,0,.5), -2px 0 8px rgba(0,0,0,.4);
  --shadow: 0 12px 40px rgba(0,0,0,.55), 0 3px 10px rgba(0,0,0,.4);
  --scrim: rgba(0,0,0,.55);
  --inverse: #f5f5f7; --on-inverse: #1d1d1f;
  --look-white: #2c2c2e; --look-cloud: #232325; --look-mist: #242c38; --look-sand: #352d20; --look-blush: #3b2428; --look-sky: #1b2f47; --look-mint: #1a3428; --look-lavender: #2e2748;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --text: #f5f5f7; --text-2: #a1a1a6; --text-muted: #6e6e73; --text-done: #8e8e93; --icon: #98989d; --placeholder: #6e6e73;
    --page: #1c1c1e; --sidebar: #131315; --card: #2c2c2e; --card-sub: #29292b; --card-veil: rgba(44,44,46,.92); --raised: #48484a; --fill: #3a3a3c;
    --bar-bg: rgba(28,28,30,.85); --control-hover: rgba(255,255,255,.08); --track: rgba(118,118,128,.24); --track-strong: rgba(118,118,128,.38); --on-track-hover: rgba(255,255,255,.1); --button: rgba(118,118,128,.22); --button-hover: rgba(118,118,128,.32); --label-brief: #6cb6ff; --label-report: #c39bff; --label-message: #5edb7c; --label-alert: #ffb340;
    --line: #3a3a3c; --line-card: #3a3a3c; --line-card-hover: #4a4a4d; --line-soft: rgba(255,255,255,.08); --weekend: rgba(255,255,255,.03); --line-strong: rgba(255,255,255,.14); --line-cell: #38383a; --grip: rgba(255,255,255,.28); --focus-ring: rgba(255,255,255,.5); --drop-line: #8e8e93;
    --primary-hover: #ff7f6d; --accent-text: #ff8c7b; --accent-tint: rgba(255,107,87,.18); --accent-pick: rgba(255,107,87,.26);
    --link: #5aa9ff; --danger: #ff6961; --danger-tint: rgba(255,69,58,.18); --highlight: rgba(255,214,10,.3);
    --tone-active-text: #6cb6ff; --tone-blocked-text: #ffb340; --tone-done-text: #5edb7c;
    --surface-shadow: 0 1px 2px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.02);
    --surface-shadow-hover: 0 4px 14px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.4);
    --panel-shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.35);
    --stage-shadow: -1px 0 0 rgba(255,255,255,.04), -14px 0 40px rgba(0,0,0,.5);
    --slide-shadow: -12px 0 40px rgba(0,0,0,.5), -2px 0 8px rgba(0,0,0,.4);
    --shadow: 0 12px 40px rgba(0,0,0,.55), 0 3px 10px rgba(0,0,0,.4);
    --scrim: rgba(0,0,0,.55);
    --inverse: #f5f5f7; --on-inverse: #1d1d1f;
    --look-white: #2c2c2e; --look-cloud: #232325; --look-mist: #242c38; --look-sand: #352d20; --look-blush: #3b2428; --look-sky: #1b2f47; --look-mint: #1a3428; --look-lavender: #2e2748;
  }
}
/* Phones */
@media (max-width: 700px) {
  :root { --bar-h: 52px; --gap: var(--space-2); --step: 20px; }
}
@media (max-width: 700px) {
  /* On a phone the stage slides most of the way across; tapping it slides it back */
  :root { --side-w: min(300px, 82vw); }
}