/* GMID Design System — canonical token definitions
   Load order: design-system.css → main.css → base template <style> (layout tokens only)
   Owned by Designer. Do not edit without a Designer session. */

/* ── Color tokens ──────────────────────────────────────────────────────────── */

:root {
  /* Core palette */
  --color-bg: #f5f6fa;
  --color-surface: #ffffff;
  --color-border: #e0e3ed;
  --color-border-subtle: #eceaf1;
  --color-accent: #5361a2;
  --color-accent-hover: #3a59e0;

  /* Text hierarchy */
  --color-text: #1a1d27;
  --color-text-strong: #15131B;
  --color-muted: #979797;
  --color-subtle: #504C57;
  --color-text-lavender-grey: #b5b5cd;  /* faintest hint text: empty states, placeholders */

  /* Surface variants */
  --color-surface-muted: #eceaf2;
  --color-surface-dim: #fafbfc;

  /* Interaction */
  --color-hover: rgba(0, 0, 0, 0.04);
  --color-active: rgba(0, 0, 0, 0.08);

  /* Status */
  --color-danger: #d63b3b;
  --color-success: #1a8c42;
  --color-warning: #faca26;  /* vivid — fills, dots, borders, meter segments */
  --color-warning-text: #7d6309;  /* AA-readable gold — warning text on light tints */
  --color-info:    #2563eb;

  /* Shell surfaces (moved from base_team.html) */
  --color-rail: #f4f2f9;
  --color-team-surface: #fcfbfe;

  /* Presence indicator — softer than --color-info so it reads as ambient
     "someone is here" rather than a status alert. Used by .sb-presence. */
  --color-presence-info: #6b88c8;

  /* Empty-state animation family — soft indigo illustration tints shared by
     every anim_<slug> component (rules/design-system.md § Animated SVGs).
     Illustration-only; not general UI. */
  --color-anim-surface: #e7e9f2;
  --color-anim-shape: #c5c9df;
  --color-anim-paper: #f5f7ff;

  /* Semantic roles the portal's components read (#1408). Brand-neutral names
     whose defaults keep the look a page with no theme has; a theme
     (static/css/themes/<name>.css) re-points them. No component rule names a
     brand value — that is the line between the platform and a dressing of it. */
  --color-label: var(--color-muted);  /* group and section labels over a list */
  --color-selected: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));  /* the selected row or folder */
  --color-selected-marker: var(--color-accent);  /* the bar or outline marking a selection */
  --color-surface-tint: var(--color-surface-dim);  /* alternate list rows, the preview stage */
  --color-surface-tint-strong: var(--color-hover);  /* list row hover */
  --color-attention-wash: var(--color-surface);  /* a message that asks something of the reader (redo request) */
  --color-danger-tint: color-mix(in srgb, var(--color-danger) 12%, var(--color-surface));  /* ground of a danger chip */
  --color-info-tint: color-mix(in srgb, var(--color-info) 12%, var(--color-surface));  /* ground of an info chip */
  --color-step-done: var(--color-success);  /* a finished step: journey marker, stage-bar dot */
  --color-step-line: var(--color-border);  /* the line joining steps */
  --color-rail-icon: var(--color-muted);  /* rail icons at rest */
  --color-rail-icon-active: var(--color-accent);  /* the current rail icon */
  --color-rail-active-bg: var(--color-surface);  /* the current rail icon's ground */
  --color-rail-mark: var(--color-text);  /* the theme's logo mark at the top of the rail */
  --color-avatar-text: var(--color-surface);  /* initials on --avatar-bg */

  /* Base-service palette (#1047) — IDENTITY colours, not status. A service is
     a thing you bought, never a state a case is in, so these deliberately sit
     apart from the status family above: painting Essential with --color-success
     would make an identity read as a state.

     Each value is a mid-dark hue chosen to stay AA-readable as text on white,
     because both renderings derive from this one token by color-mix — the pill
     uses it as its text colour over a light mix of itself, and the row wash is
     a much weaker mix of the same. That is what makes "soft tones, not bright"
     a property of the ratio in main.css rather than of whoever picks the
     colour. Six entries, chosen to stay apart at a glance on a dense board;
     services carry a palette KEY naming one of these (core/service_colors.py). */
  --color-service-blue: #2b62b0;
  --color-service-teal: #16786f;
  --color-service-green: #17835a;
  --color-service-amber: #9a6d0d;
  --color-service-rose: #b23a6b;
  --color-service-plum: #7a4a9c;

  /* Issued documents (#1426) — the receipt and the invoice a couple keeps,
     rendered to PDF in the brand's own dark olive (the wordmark's colour) and
     a warm paper tint, as receipt #12054 printed them. */
  --color-document-header: #3D3D24;  /* the band under a document's header: the package's name */
  --color-document-total: #F3EDE1;  /* the ground of a document's total row */

  /* ── Colour scales (primitives) ──────────────────────────────────────────
     Raw palette steps behind the semantic roles above. Slate is the neutral
     chrome family (50 = --color-bg); accent is the brand blue family (500 =
     --color-accent-hover); green and amber back the success / warning roles.
     Prefer a semantic token in UI code — reach for a scale step only when no
     semantic role fits. */
  --color-slate-50: #f5f6fa;
  --color-slate-100: #eceef4;
  --color-slate-200: #dcdfea;
  --color-slate-300: #c4c9db;
  --color-slate-400: #a3aac6;
  --color-slate-500: #7f88ab;
  --color-slate-600: #616a8d;
  --color-slate-700: #4a5270;
  --color-slate-800: #343a52;
  --color-slate-900: #23283a;
  --color-accent-50: #eef1fd;
  --color-accent-100: #e6ebfb;
  --color-accent-200: #c3cef4;
  --color-accent-300: #9fb0ee;
  --color-accent-400: #6f88e8;
  --color-accent-500: #3a59e0;
  --color-accent-600: #2f48c4;
  --color-accent-700: #263aa0;
  --color-accent-800: #1f2f80;
  --color-accent-900: #1a2660;
  --color-green-100: #d6f0e3;
  --color-green-200: #a6dcc4;
  --color-green-300: #6cc7a1;
  --color-green-400: #3fbb87;
  --color-green-500: #17835a;
  --color-green-600: #116848;
  --color-green-700: #0d5138;
  --color-amber-100: #fbeed0;
  --color-amber-200: #f4da9c;
  --color-amber-300: #eec66a;
  --color-amber-400: #e8b73f;
  --color-amber-500: #c08a12;
  --color-amber-600: #9a6d0d;
  --color-amber-700: #7a5609;
}

/* ── Typography tokens ─────────────────────────────────────────────────────── */

:root {
  --font: "Inter", system-ui, sans-serif;

  /* Font sizes — 5 steps (Front-inspired) */
  --font-xxs: 0.6rem;
  --font-xs: 0.75rem;
  /* 12px — timestamps, badges, metadata */
  --font-sm: 0.8125rem;
  /* 13px — sidebar, nav labels, secondary */
  --font-base: 0.875rem;
  /* 14px — body, buttons, primary content */
  --font-lg: 1rem;
  /* 16px — page titles, section headers */
  --font-xl: 1.25rem;
  /* 20px — one-time-code digits, large display numerals */

  /* Font weights — 4 steps */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Line heights — 3 steps */
  --line-height-tight: 1.33;
  --line-height-normal: 1.43;
  --line-height-relaxed: 1.5;

  /* Voice of labels and buttons (#1408) — none, or a theme's tracked capitals */
  --text-transform-label: none;
  /* group labels, meta lines, chips */
  --letter-spacing-label: normal;
  --text-transform-button: none;
  /* button labels */
  --letter-spacing-button: normal;
}

/* ── Spacing tokens ────────────────────────────────────────────────────────── */

:root {
  --space-1: 0.25rem;
  /* 4px  — icon gaps, micro-padding */
  --space-2: 0.375rem;
  /* 6px  — tight padding, badge padding */
  --space-3: 0.5rem;
  /* 8px  — compact component padding */
  --space-4: 0.75rem;
  /* 12px — standard padding */
  --space-5: 1rem;
  /* 16px — comfortable padding */
  --space-6: 1.5rem;
  /* 24px — section spacing */
  --space-8: 2rem;
  /* 32px — layout spacing */
  --space-ws-gutter: 18px;
  /* unified workspace shell gutter — aligns grid/panel with the tabs (#517) */
}

/* ── Control sizing tokens ─────────────────────────────────────────────────── */

:root {
  --control-h: 30px;
  /* unified toolbar control height — buttons, selects, search, chips */
  --control-h-lg: 48px;
  /* large input height — one-time-code cells and touch-first fields */
  --pane-head-h: 40px;
  /* pane chrome row height — pane headers, batch summaries; airier than --control-h */
}

/* ── Border radius tokens ──────────────────────────────────────────────────── */

:root {
  --radius-xs: 4px;
  /* tight corners — compact pills, icon chips */
  --radius-sm: 6px;
  /* buttons, inputs, small elements */
  --radius-md: 8px;
  /* cards, modals, containers */
  --radius-lg: 10px;
  /* large inputs, search fields */
  --radius-auth-card: 14px;
  /* auth/portal cards — softer corners than team-side */
  --radius-pill: 99px;
  /* badges, pills, tags */
}

/* ── Shadow tokens ─────────────────────────────────────────────────────────── */

:root {
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent);
  --shadow-focus-warning: 0 0 0 0.1875rem color-mix(in srgb, var(--color-warning) 22%, transparent);
  /* timeline comment card — resting + hover */
  --shadow-card: 0 0.1875rem 0.75rem color-mix(in srgb, var(--color-text) 5%, transparent);
  --shadow-card-hover: 0 0.25rem 1rem color-mix(in srgb, var(--color-text) 8%, transparent);
  /* floating dark toolbar (text-selection format bar) */
  --shadow-floating: 0 var(--space-1) var(--space-3) color-mix(in srgb, var(--color-text) 28%, transparent);
  /* timeline rail node — surface-coloured halo around an avatar so the
     rail line appears to pass behind it without redrawing the node. */
  --shadow-rail-node: 0 0 0 3px var(--color-team-surface);
  /* Type-coloured variants — inner halo masks the rail line, outer ring
     signals action type (approve = green, move/stage = accent blue). */
  --shadow-rail-node-approve:
    0 0 0 2px var(--color-team-surface),
    0 0 0 4px color-mix(in srgb, var(--color-success) 55%, var(--color-border));
  --shadow-rail-node-move:
    0 0 0 2px var(--color-team-surface),
    0 0 0 4px color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
  /* Portal (#1408) — built only from :root tokens, so a theme's :root
     re-point carries through. */
  --shadow-rail-badge: 0 0 0 2px var(--color-rail);  /* a count badge sitting on the rail */
  --shadow-step-halo: 0 0 0 4px var(--color-surface-muted);  /* the current journey step */
  --shadow-chip-selected: inset 0 0 0 1px var(--color-selected-marker);  /* a selected chip (folders on a phone) */
}

/* ── Transition tokens ─────────────────────────────────────────────────────── */

:root {
  --transition-fast: 0.1s;
  /* entrance animations that need a longer beat than --transition-slow —
     tooltip slide-ins and similar reveals (also doubles as their show delay) */
  --transition-slower: 0.32s;
  /* immediate feedback (hover backgrounds) */
  --transition-normal: 0.15s;
  /* default for colour/border/opacity changes */
  --transition-slow: 0.2s;
  /* layout shifts, larger moves */
}

/* ── Z-index scale ─────────────────────────────────────────────────────────── */

:root {
  --z-base: 1;
  /* in-flow stacking contexts */
  --z-sticky: 10;
  /* sticky headers, filter bars */
  --z-dropdown: 50;
  /* menus, typeaheads, popovers */
  --z-modal: 100;
  /* modal overlays, side panels */
  --z-toast: 1100;
  /* flash stack — sits above every other layer */
}

/* ── Opacity / tint tokens ────────────────────────────────────────────────── */

:root {
  --opacity-subtle: 0.06;
  /* hover overlays on neutral surfaces */
  --opacity-light: 0.1;
  /* status tint backgrounds */
  --opacity-medium: 0.15;
  /* stronger overlays, focus rings */
  --opacity-anim: 0.3;
  /* empty-state animations — the whole icon fades to ambient */
}

/* ── Avatar tokens ─────────────────────────────────────────────────────────── */

:root {
  --avatar-border-radius: 6px;
  --avatar-bg: #d5a401;
}

/* ── Flash messages (shared across team + portal) ─────────────────────────── */

.flash-stack {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 24rem;
}

.flash {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  box-shadow: 0 0px 8px rgba(0, 0, 0, 0.05);
}

.flash-text {
  flex: 1;
}

.flash-close {
  background: none;
  border: none;
  color: inherit;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
}

.flash-close:hover {
  opacity: 1;
}

.flash-success {
  background: var(--color-surface);
  color: var(--color-success);
  border: 1px solid color-mix(in srgb, var(--color-success) 25%, transparent);
}

.flash-error {
  background: var(--color-surface);
  color: var(--color-danger);
  border: 1px solid color-mix(in srgb, var(--color-danger) 20%, transparent);
}

.flash-info {
  background: var(--color-surface);
  color: var(--color-accent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 20%, transparent);
}

/* ── Checkbox (shared across team + portal) ───────────────────────────────── */

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  user-select: none;
  font-size: var(--font-xs);
  line-height: var(--line-height-normal);
  color: var(--color-muted);
}

.checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  cursor: inherit;
  transition: border-color var(--transition-normal) ease, box-shadow var(--transition-normal) ease, background-color var(--transition-normal) ease;
}

.checkbox input[type="checkbox"]:hover:not(:disabled) {
  border-color: var(--color-accent);
}

.checkbox input[type="checkbox"]:checked {
  border-color: var(--color-accent);
  border-width: 2px;
  background-color: var(--color-accent);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='3.5 8.5 6.5 11.5 12.5 5'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.75rem 0.75rem;
}

.checkbox input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.checkbox input[type="checkbox"]:disabled {
  cursor: not-allowed;
  background-color: var(--color-border-subtle);
}

.checkbox input[type="checkbox"]:disabled:checked {
  border-color: var(--color-border);
  background-color: var(--color-border);
}

.checkbox:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.6;
}

.checkbox.dimmed {
  color: #5261a24d;
}

.checkbox.square input[type="checkbox"] {
  border-radius: var(--radius-xs);
}

/* ── Range slider (shared) ────────────────────────────────────────────────── */

.range-slider {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  cursor: pointer;
  user-select: none;
}

.range-slider__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.range-slider__label {
  font-size: var(--font-xs);
  line-height: var(--line-height-normal);
  color: var(--color-muted);
}

.range-slider__value {
  font-size: var(--font-xs);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

/* `editable`: a number field in the readout's place, to type the value. */
.range-slider__entry {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-xs);
  color: var(--color-muted);
}

.range-slider__input {
  width: 4.5rem;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: right;
  cursor: text;
  user-select: text;
}

.range-slider__input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--shadow-focus);
}

.range-slider input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 0.25rem;
  margin: 0;
  border-radius: var(--radius-pill);
  background: var(--color-border-subtle);
  cursor: inherit;
}

.range-slider input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  border: 2px solid var(--color-surface);
  background: var(--color-accent);
  box-shadow: var(--shadow-sm);
  cursor: inherit;
}

.range-slider input[type="range"]::-moz-range-thumb {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  border: 2px solid var(--color-surface);
  background: var(--color-accent);
  box-shadow: var(--shadow-sm);
  cursor: inherit;
}

.range-slider input[type="range"]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Multi-select edit where the selection doesn't share one value. The track
   reads as unset; the first drag commits an absolute value to everything. */
.range-slider--mixed input[type="range"]::-webkit-slider-thumb {
  background: var(--color-border);
}

.range-slider--mixed input[type="range"]::-moz-range-thumb {
  background: var(--color-border);
}

.range-slider--mixed .range-slider__value {
  color: var(--color-muted);
  font-style: italic;
}

.range-slider--disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* ── Reset ─────────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}