/* 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:       #4f6ef7;
  --color-accent-hover: #3a59e0;

  /* Text hierarchy */
  --color-text:         #1a1d27;
  --color-text-strong:  #15131B;
  --color-muted:        #6b7190;
  --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 */
}

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

:root {
  --radius-sm:   6px;   /* buttons, inputs, small elements */
  --radius-md:   8px;   /* cards, modals, containers */
  --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 rgba(79, 110, 247, 0.15);
}

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

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

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

.flash {
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

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

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

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

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

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