/* 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: #f0f1f3;
  --color-accent:       #5361a2;
  --color-accent-hover: #3a59e0;

  /* Text hierarchy */
  --color-text:         #1a1d27;
  --color-text-strong:  #15131B;
  --color-muted: #979797;
  --color-subtle:       #504C57;

  /* 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-info:    #2563eb;

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

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

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

  /* Font sizes — 4 steps (Front-inspired) */
  --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 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;
}

/* ── 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 */
}

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

:root {
  --control-h: 30px;    /* unified toolbar control height — buttons, selects, search, chips */
}

/* ── 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-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);
}

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

:root {
  --transition-fast:   0.1s;    /* 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 */
}

/* ── 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-base);
  line-height: var(--line-height-normal);
}

.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;
}

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

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