/* ============================================================
   BoardPortal — Design System (base.css)
   Version: 2.0 — Matches improved_design01.md Appendix A
   
   Editorial · Warm · Calm · Precise · Honest
   Depth via TONAL LAYERING, never box-shadows on static surfaces.
   ============================================================ */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ============================================================
   1. DESIGN TOKENS (Appendix A — improved_design01.md)
   ============================================================ */
:root {
  /* --- Color: Surfaces & Text --- */
  --bg-primary:        #FAF8F5;
  --surface-raised:    #FFFFFF;
  --surface-sunken:    #F3EFE8;
  --border-default:    #E5DFD3;
  --border-strong:     #D4CDBE;
  --text-primary:      #1D1B18;
  --text-secondary:    #57504A;
  --text-tertiary:     #8A8177;

  /* --- Accent & Secondary --- */
  --accent:            #A43C23;
  --accent-hover:      #8C331E;
  --accent-soft:       #F7E9E3;
  --accent-on:         #FFFFFF;
  --secondary:         #506355;
  --secondary-soft:    #E9EDE7;
  --focus-ring:        rgba(164,60,35,0.35);

  /* --- Status (WCAG-passing) --- */
  --status-done:       #2D6A4F;
  --status-done-soft:  #E4F0E9;
  --status-progress:   #96601B;
  --status-progress-soft: #F8EEDC;
  --status-todo:       #66707A;
  --status-todo-soft:  #EDEFF0;
  --status-blocked:    #B3282D;
  --status-blocked-soft: #F9E4E4;

  /* --- Feedback --- */
  --success:           #2D6A4F;
  --success-soft:      #E4F0E9;
  --warning:           #96601B;
  --warning-soft:      #F8EEDC;
  --danger:            #B3282D;
  --danger-soft:       #F9E4E4;
  --info:              #3E5C76;
  --info-soft:         #E6EDF2;

  /* --- Dark Band (landing only) --- */
  --dark-bg:           #211D19;
  --dark-text:         #F5F1EA;
  --dark-text-secondary: #B8AE9F;
  --dark-border:       #3A342C;

  /* --- Typography --- */
  --font-headline:     'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-body:         'Hanken Grotesk', -apple-system, 'Segoe UI', sans-serif;
  --font-mono:         'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* --- Type Scale --- */
  --text-display:      56px;
  --text-h1:           40px;
  --text-h2:           30px;
  --text-h3:           22px;
  --text-h4:           17px;
  --text-body-lg:      17px;
  --text-body:         15px;
  --text-small:        13px;
  --text-caption:      12px;
  --text-eyebrow:      12px;

  /* --- Spacing (4px base) --- */
  --space-1:           4px;
  --space-2:           8px;
  --space-3:           12px;
  --space-4:           16px;
  --space-5:           24px;
  --space-6:           32px;
  --space-7:           48px;
  --space-8:           64px;
  --space-9:           96px;

  /* --- Radius & Elevation --- */
  --radius-none:       0px;
  --radius-xs:         2px;
  --radius-full:       999px;
  --shadow-float:      0 4px 16px rgba(29,27,24,0.10), 0 1px 3px rgba(29,27,24,0.08);
  --shadow-modal:      0 12px 40px rgba(29,27,24,0.16), 0 2px 8px rgba(29,27,24,0.08);

  /* --- Motion --- */
  --duration-instant:  100ms;
  --duration-fast:     150ms;
  --duration-base:     200ms;
  --duration-slow:     300ms;
  --duration-page:     450ms;
  --ease-standard:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-editorial:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit:         cubic-bezier(0.4, 0, 1, 1);

  /* --- Layout & Breakpoints --- */
  --bp-sm:             480px;
  --bp-md:             768px;
  --bp-lg:             1024px;
  --bp-xl:             1280px;
  --container-landing: 1200px;
  --container-dashboard: 1400px;
  --container-portal:  760px;
  --sidebar-width:     264px;
  --topbar-height:     64px;
  --portal-header-height: 72px;

  /* --- Z-Index Scale --- */
  --z-base:            0;
  --z-sticky:          20;
  --z-dropdown:        40;
  --z-overlay:         50;
  --z-modal:           60;
  --z-toast:           70;
  --z-tooltip:         80;
}


/* ============================================================
   2. CSS RESET
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.55;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  min-height: 100vh;
}

img, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

a:hover {
  color: var(--accent-hover);
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

ul, ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headline);
  font-weight: 500;
  line-height: 1.15;
  color: var(--text-primary);
}


/* ============================================================
   3. TYPOGRAPHY (Part 2.2)
   ============================================================ */

/* Headlines — EB Garamond */
.text-display {
  font-family: var(--font-headline);
  font-size: var(--text-display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.text-h1, h1 {
  font-family: var(--font-headline);
  font-size: var(--text-h1);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.text-h2, h2 {
  font-family: var(--font-headline);
  font-size: var(--text-h2);
  font-weight: 500;
  line-height: 1.2;
}
.text-h3, h3 {
  font-family: var(--font-headline);
  font-size: var(--text-h3);
  font-weight: 500;
  line-height: 1.25;
}
.text-h4, h4 {
  font-family: var(--font-body);
  font-size: var(--text-h4);
  font-weight: 600;
  line-height: 1.3;
}

/* Body — Hanken Grotesk */
.text-body-lg {
  font-size: var(--text-body-lg);
  line-height: 1.6;
}
.text-body {
  font-size: var(--text-body);
  line-height: 1.55;
}
.text-body-strong {
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 1.55;
}
.text-small {
  font-size: var(--text-small);
  line-height: 1.45;
}
.text-caption {
  font-size: var(--text-caption);
  line-height: 1.4;
}

/* Eyebrow — JetBrains Mono (Part 2.2.3.1 — product signature label) */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--secondary);
}

/* Mono — JetBrains Mono */
.mono {
  font-family: var(--font-mono);
  font-size: var(--text-small);
}
.mono-xs {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
}

/* Serif italic (testimonials, executive summary, pull quotes) */
.serif-italic {
  font-family: var(--font-headline);
  font-style: italic;
}

/* Helpers */
.color-primary   { color: var(--text-primary); }
.color-secondary { color: var(--text-secondary); }
.color-tertiary  { color: var(--text-tertiary); }
.color-accent    { color: var(--accent); }
.color-sage      { color: var(--secondary); }
.font-headline   { font-family: var(--font-headline); }
.font-body       { font-family: var(--font-body); }
.font-mono       { font-family: var(--font-mono); }
.weight-400      { font-weight: 400; }
.weight-500      { font-weight: 500; }
.weight-600      { font-weight: 600; }
.weight-700      { font-weight: 700; }
.italic          { font-style: italic; }


/* ============================================================
   4. TONAL SURFACES
   ============================================================ */
.surface-raised    { background-color: var(--surface-raised); }
.surface-base      { background-color: var(--bg-primary); }
.surface-sunken    { background-color: var(--surface-sunken); }


/* ============================================================
   5. BUTTONS (Part 3.1)
   Height: 40px default / 32px small / 48px large
   Radius: --radius-none; 1px border
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-body);
  height: 40px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-none);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  position: relative;
}

/* Primary — Terracotta */
.btn-primary {
  background-color: var(--accent);
  color: var(--accent-on);
  border-color: var(--accent);
}
.btn-primary:hover {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-on);
}
.btn-primary:active {
  filter: brightness(0.96);
}

/* Secondary — Outlined */
.btn-secondary {
  background-color: transparent;
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.btn-secondary:hover {
  background-color: var(--surface-sunken);
  border-color: var(--text-tertiary);
  color: var(--text-primary);
}
.btn-secondary:active {
  background-color: var(--border-default);
}

/* Ghost — Text only */
.btn-ghost {
  background-color: transparent;
  color: var(--accent);
  border-color: transparent;
  padding: 0 var(--space-4);
}
.btn-ghost:hover {
  background-color: var(--accent-soft);
}
.btn-ghost:active {
  filter: brightness(0.96);
}

/* Destructive */
.btn-danger {
  background-color: var(--danger);
  color: var(--accent-on);
  border-color: var(--danger);
}
.btn-danger:hover {
  background-color: #9A2126;
  border-color: #9A2126;
}

/* Sizes */
.btn-sm {
  height: 32px;
  font-size: var(--text-small);
  padding: 0 var(--space-4);
}
.btn-lg {
  height: 48px;
  font-size: var(--text-body-lg);
  padding: 0 var(--space-6);
}

/* Full Width */
.btn-block {
  width: 100%;
}

/* Disabled */
.btn:disabled,
.btn[disabled] {
  background-color: var(--border-default);
  color: var(--text-tertiary);
  border-color: var(--border-default);
  cursor: not-allowed;
  pointer-events: none;
}

/* Focus */
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--focus-ring);
}

/* Loading state */
.btn.is-loading {
  color: transparent;
  pointer-events: none;
}
.btn.is-loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid var(--accent-on);
  border-top-color: transparent;
  border-radius: var(--radius-full);
  animation: btn-spin 600ms linear infinite;
}
.btn-secondary.is-loading::after,
.btn-ghost.is-loading::after {
  border-color: var(--text-tertiary);
  border-top-color: transparent;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* Icon inside button */
.btn svg,
.btn .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.btn-sm svg,
.btn-sm .icon {
  width: 14px;
  height: 14px;
}


/* ============================================================
   6. FORM INPUTS (Part 3.2)
   Height: 40px; bg: --surface-raised; border: 1px --border-default
   ============================================================ */
.input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.input-label {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--text-primary);
}

.input-label .optional {
  font-weight: 400;
  color: var(--text-tertiary);
}

.input {
  font-family: var(--font-body);
  font-size: var(--text-body);
  height: 40px;
  padding: 0 var(--space-3);
  background-color: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-none);
  color: var(--text-primary);
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
  width: 100%;
}

.input::placeholder {
  color: var(--text-tertiary);
}

.input:hover {
  border-color: var(--border-strong);
}

.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.input:disabled {
  background-color: var(--surface-sunken);
  color: var(--text-tertiary);
  cursor: not-allowed;
}

.input-error {
  border-color: var(--danger);
}

.input-hint {
  font-size: var(--text-small);
  color: var(--text-tertiary);
}

.input-error-msg {
  font-size: var(--text-small);
  color: var(--danger);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* Textarea */
textarea.input {
  height: auto;
  min-height: 120px;
  padding: var(--space-3);
  resize: vertical;
}

/* Select */
select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2357504A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: 40px;
}


/* ============================================================
   7. STATUS BADGES (Part 3.4)
   Dot 6px + text on soft tinted bg; radius --radius-xs
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-xs);
  line-height: 1;
  white-space: nowrap;
}

/* Badge dot */
.badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.badge-done {
  background-color: var(--status-done-soft);
  color: var(--status-done);
}
.badge-done::before { background-color: var(--status-done); }

.badge-progress {
  background-color: var(--status-progress-soft);
  color: var(--status-progress);
}
.badge-progress::before { background-color: var(--status-progress); }

.badge-todo {
  background-color: var(--status-todo-soft);
  color: var(--status-todo);
}
.badge-todo::before { background-color: var(--status-todo); }

.badge-blocked {
  background-color: var(--status-blocked-soft);
  color: var(--status-blocked);
}
.badge-blocked::before { background-color: var(--status-blocked); }


/* ============================================================
   8. CARDS (Part 3.3)
   bg: --surface-raised; 1px --border-default; radius: 0; no shadow
   ============================================================ */
.card {
  background-color: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-none);
  padding: var(--space-5);
}

.card-interactive {
  cursor: pointer;
  transition: border-color var(--duration-base) var(--ease-editorial),
              transform var(--duration-base) var(--ease-editorial);
}
.card-interactive:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.card-title {
  font-family: var(--font-body);
  font-size: var(--text-h4);
  font-weight: 600;
  line-height: 1.3;
}

.card-meta {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--text-tertiary);
}

.card-body {
  color: var(--text-secondary);
  font-size: var(--text-body);
  line-height: 1.55;
}

.card-footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-default);
}

/* Sunken card variant */
.card-sunken {
  background-color: var(--surface-sunken);
}


/* ============================================================
   9. MODAL (Part 3.8)
   Scrim: rgba(29,27,24,0.4); Panel: --shadow-modal
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(29, 27, 24, 0.4);
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-fast) var(--ease-standard),
              visibility var(--duration-fast) var(--ease-standard);
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal {
  background-color: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-none);
  box-shadow: var(--shadow-modal);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(12px);
  opacity: 0;
  transition: transform var(--duration-slow) var(--ease-editorial),
              opacity var(--duration-slow) var(--ease-editorial);
}

.modal-overlay.active .modal {
  transform: translateY(0);
  opacity: 1;
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--space-6);
  gap: var(--space-4);
}

.modal-title {
  font-family: var(--font-headline);
  font-size: var(--text-h2);
  font-weight: 500;
}

.modal-close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  flex-shrink: 0;
  transition: color var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard);
}
.modal-close:hover {
  color: var(--text-primary);
  background-color: var(--surface-sunken);
}

.modal-body {
  padding: 0 var(--space-6) var(--space-6);
  font-size: var(--text-body);
  color: var(--text-secondary);
  line-height: 1.55;
}

.modal-footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-default);
}


/* ============================================================
   10. PROGRESS BAR (Part 3.5)
   Height: 6px; track: --surface-sunken; fill: --accent
   ============================================================ */
.progress-bar {
  width: 100%;
  height: 6px;
  background-color: var(--surface-sunken);
  border-radius: var(--radius-xs);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background-color: var(--accent);
  border-radius: var(--radius-xs);
  transition: width var(--duration-base) var(--ease-standard);
}

@media (prefers-reduced-motion: no-preference) {
  .progress-fill.animate-in {
    transition: width var(--duration-page) var(--ease-editorial);
  }
}

.progress-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.progress-label {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--text-small);
  color: var(--text-secondary);
}


/* ============================================================
   11. SKELETON LOADING (Part 3.10)
   Pulse: 1.6s opacity shimmer (0.6 → 1)
   ============================================================ */
@keyframes skeleton-pulse {
  0%   { opacity: 0.6; }
  50%  { opacity: 1; }
  100% { opacity: 0.6; }
}

.skeleton {
  background-color: var(--surface-sunken);
  animation: skeleton-pulse 1.6s var(--ease-standard) infinite;
  border-radius: var(--radius-none);
}

@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
    opacity: 0.8;
  }
}

.skeleton-text {
  height: 14px;
  margin-bottom: var(--space-2);
  width: 80%;
}
.skeleton-text:last-child {
  width: 55%;
}

.skeleton-heading {
  height: 28px;
  width: 60%;
  margin-bottom: var(--space-4);
}

.skeleton-card {
  height: 180px;
  width: 100%;
}

.skeleton-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
}

.skeleton-badge {
  width: 80px;
  height: 22px;
  border-radius: var(--radius-xs);
}


/* ============================================================
   12. DIVIDERS & BORDERS
   ============================================================ */
.divider {
  height: 1px;
  background-color: var(--border-default);
  border: none;
  margin: var(--space-6) 0;
}

.border-hairline {
  border: 1px solid var(--border-default);
}


/* ============================================================
   13. TOOLTIP (Part 3.11)
   Dark bg, --text-small, radius --radius-xs, --shadow-float
   ============================================================ */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  background-color: var(--dark-bg);
  color: var(--dark-text);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 400;
  white-space: nowrap;
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-float);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-fast) var(--ease-standard);
  transition-delay: 300ms;
  pointer-events: none;
  z-index: var(--z-tooltip);
}

[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Hide tooltips on touch devices */
@media (hover: none) {
  [data-tooltip]::after {
    display: none;
  }
}


/* ============================================================
   14. LAYOUT UTILITIES
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-landing);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.container-narrow {
  max-width: var(--container-portal);
}

.container-wide {
  max-width: var(--container-dashboard);
}

/* Flex */
.flex            { display: flex; }
.flex-col        { flex-direction: column; }
.flex-wrap       { flex-wrap: wrap; }
.items-center    { align-items: center; }
.items-start     { align-items: flex-start; }
.items-end       { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.gap-1           { gap: var(--space-1); }
.gap-2           { gap: var(--space-2); }
.gap-3           { gap: var(--space-3); }
.gap-4           { gap: var(--space-4); }
.gap-5           { gap: var(--space-5); }
.gap-6           { gap: var(--space-6); }
.flex-1          { flex: 1; }
.flex-shrink-0   { flex-shrink: 0; }

/* Grid */
.grid {
  display: grid;
  gap: var(--space-6);
}
.grid-2  { grid-template-columns: repeat(2, 1fr); }
.grid-3  { grid-template-columns: repeat(3, 1fr); }
.grid-4  { grid-template-columns: repeat(4, 1fr); }

/* Spacing */
.mt-1   { margin-top: var(--space-1); }
.mt-2   { margin-top: var(--space-2); }
.mt-3   { margin-top: var(--space-3); }
.mt-4   { margin-top: var(--space-4); }
.mt-5   { margin-top: var(--space-5); }
.mt-6   { margin-top: var(--space-6); }
.mt-7   { margin-top: var(--space-7); }
.mb-1   { margin-bottom: var(--space-1); }
.mb-2   { margin-bottom: var(--space-2); }
.mb-3   { margin-bottom: var(--space-3); }
.mb-4   { margin-bottom: var(--space-4); }
.mb-5   { margin-bottom: var(--space-5); }
.mb-6   { margin-bottom: var(--space-6); }
.mb-7   { margin-bottom: var(--space-7); }

.p-3    { padding: var(--space-3); }
.p-4    { padding: var(--space-4); }
.p-5    { padding: var(--space-5); }
.p-6    { padding: var(--space-6); }

/* Text alignment */
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-left   { text-align: left; }

/* Display */
.hidden  { display: none; }
.block   { display: block; }
.inline  { display: inline; }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow-y: auto; }

/* Width */
.w-full { width: 100%; }


/* ============================================================
   15. NOTIFICATION DOT
   ============================================================ */
.notification-dot {
  position: relative;
}

.notification-dot::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 6px;
  height: 6px;
  background-color: var(--accent);
  border-radius: var(--radius-full);
  border: 2px solid var(--surface-raised);
}


/* ============================================================
   16. EMPTY STATE (Part 3.12)
   64px icon → h3 → body desc → primary CTA
   ============================================================ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-9) var(--space-6);
}

.empty-state-icon {
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-6);
  color: var(--secondary);
  stroke-width: 1.5;
}

.empty-state-title {
  font-family: var(--font-headline);
  font-size: var(--text-h3);
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.empty-state-desc {
  font-size: var(--text-body);
  color: var(--text-secondary);
  margin-bottom: var(--space-6);
  max-width: 400px;
  line-height: 1.55;
}


/* ============================================================
   17. TABLE (Part 3.13)
   Header: --surface-sunken; Rows: 48px; hover on dashboard
   ============================================================ */
.table {
  width: 100%;
  text-align: left;
}

.table th {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--secondary);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-default);
  background-color: var(--surface-sunken);
}

.table td {
  font-size: var(--text-body);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-default);
  color: var(--text-secondary);
  height: 48px;
  vertical-align: middle;
}

.table tbody tr:hover td {
  background-color: var(--surface-sunken);
}

/* Numeric columns */
.table .col-numeric {
  font-family: var(--font-mono);
  text-align: right;
}


/* ============================================================
   18. DROPDOWN & MENUS (Part 3.7)
   --shadow-float; radius 0; min-width 200px
   ============================================================ */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 200px;
  background-color: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-none);
  box-shadow: var(--shadow-float);
  padding: var(--space-2) 0;
  z-index: var(--z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--duration-fast) var(--ease-standard),
              visibility var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}

.dropdown.active .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 36px;
  padding: 0 var(--space-3);
  font-size: var(--text-body);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
  width: 100%;
  text-align: left;
  text-decoration: none;
}

.dropdown-item:hover {
  background-color: var(--surface-sunken);
  color: var(--text-primary);
}

.dropdown-item.destructive {
  color: var(--danger);
}

.dropdown-divider {
  height: 1px;
  background-color: var(--border-default);
  margin: var(--space-2) 0;
}


/* ============================================================
   19. TABS
   ============================================================ */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-default);
}

.tab {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}

.tab:hover {
  color: var(--text-secondary);
}

.tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.tab:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--focus-ring);
}


/* ============================================================
   20. PHASE INDICATOR (Part 3.5 — Client Portal)
   ============================================================ */
.phase-indicator {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
}

.phase-step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  position: relative;
}

.phase-step::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--border-default);
}

.phase-step:last-child::after {
  display: none;
}

.phase-step.completed::after {
  background-color: var(--secondary);
}

.phase-dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  border: 2px solid var(--border-default);
  background-color: var(--surface-raised);
}

.phase-step.completed .phase-dot {
  background-color: var(--secondary);
  border-color: var(--secondary);
}

.phase-step.active .phase-dot {
  background-color: var(--accent);
  border-color: var(--accent);
}

.phase-label {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.phase-step.active .phase-label {
  color: var(--text-primary);
  font-weight: 600;
}

.phase-step.completed .phase-label {
  color: var(--text-tertiary);
}

/* Mobile collapse */
.phase-mobile-label {
  display: none;
  font-family: var(--font-mono);
  font-size: var(--text-small);
  color: var(--text-secondary);
}


/* ============================================================
   21. TOAST (Part 3.9)
   Bottom-right; dark bg; 8px left accent bar; auto-dismiss 5s
   ============================================================ */
.toast-container {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background-color: var(--dark-bg);
  color: var(--dark-text);
  font-size: var(--text-body);
  font-weight: 500;
  border-radius: var(--radius-none);
  min-width: 300px;
  max-width: 480px;
  transform: translateY(20px);
  opacity: 0;
  transition: transform var(--duration-base) var(--ease-editorial),
              opacity var(--duration-base) var(--ease-editorial);
  border-left: none;
}

.toast.active {
  transform: translateY(0);
  opacity: 1;
}

.toast-success { border-left: 8px solid var(--success); }
.toast-warning { border-left: 8px solid var(--warning); }
.toast-danger  { border-left: 8px solid var(--danger); }
.toast-info    { border-left: 8px solid var(--info); }

.toast-action {
  color: var(--accent-soft);
  font-weight: 600;
  cursor: pointer;
  margin-left: auto;
  white-space: nowrap;
}

.toast-dismiss {
  color: var(--dark-text-secondary);
  cursor: pointer;
  margin-left: var(--space-2);
}

/* Mobile: full width */
@media (max-width: 480px) {
  .toast-container {
    left: var(--space-4);
    right: var(--space-4);
    bottom: var(--space-4);
  }
  .toast {
    min-width: auto;
    width: 100%;
  }
}


/* ============================================================
   22. INLINE MESSAGES
   ============================================================ */
.inline-msg {
  padding: var(--space-4);
  font-size: var(--text-body);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  line-height: 1.55;
}

.inline-msg svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.inline-msg-info {
  background-color: var(--info-soft);
  color: var(--info);
  border-left: 3px solid var(--info);
}

.inline-msg-error {
  background-color: var(--danger-soft);
  color: var(--danger);
  border-left: 3px solid var(--danger);
}

.inline-msg-success {
  background-color: var(--success-soft);
  color: var(--success);
  border-left: 3px solid var(--success);
}

.inline-msg-warning {
  background-color: var(--warning-soft);
  color: var(--warning);
  border-left: 3px solid var(--warning);
}


/* ============================================================
   23. UPLOAD ZONE (Part 3.2)
   Dashed 1px --border-strong; --surface-sunken bg; 96px min-height
   ============================================================ */
.upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-7) var(--space-6);
  background-color: var(--surface-sunken);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-none);
  min-height: 96px;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard);
  text-align: center;
}

.upload-zone:hover,
.upload-zone.drag-over {
  border-color: var(--accent);
  background-color: var(--accent-soft);
}

.upload-zone-icon {
  width: 40px;
  height: 40px;
  color: var(--text-tertiary);
}

.upload-zone-label {
  font-size: var(--text-body);
  color: var(--text-secondary);
}

.upload-zone-hint {
  font-size: var(--text-small);
  color: var(--text-tertiary);
}


/* ============================================================
   24. COLOR PICKER (Part 3.2)
   40px swatch + hex text field
   ============================================================ */
.color-picker-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.color-swatch {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-default);
  cursor: pointer;
  flex-shrink: 0;
}

.color-input {
  font-family: var(--font-mono);
  font-size: var(--text-small);
  width: 100px;
}


/* ============================================================
   25. AVATARS (Part 3.14)
   Radius full; sizes 28/36/44px
   ============================================================ */
.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background-color: var(--secondary-soft);
  color: var(--secondary);
  font-family: var(--font-body);
  font-weight: 600;
  flex-shrink: 0;
}
.avatar-sm { width: 28px; height: 28px; font-size: var(--text-small); }
.avatar-md { width: 36px; height: 36px; font-size: var(--text-body); }
.avatar-lg { width: 44px; height: 44px; font-size: var(--text-body-lg); }

/* Stacked avatars */
.avatar-stack {
  display: flex;
}
.avatar-stack .avatar + .avatar {
  margin-left: -8px;
  box-shadow: 0 0 0 2px var(--bg-primary);
}


/* ============================================================
   26. COPY-TO-CLIPBOARD (Part 3.16)
   ============================================================ */
.copy-row {
  display: flex;
  align-items: center;
  gap: 0;
}

.copy-value {
  font-family: var(--font-mono);
  font-size: var(--text-small);
  padding: var(--space-3);
  background-color: var(--surface-sunken);
  border: 1px solid var(--border-default);
  border-right: none;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-secondary);
}

.copy-btn {
  height: 40px;
  padding: 0 var(--space-4);
  background-color: var(--surface-raised);
  border: 1px solid var(--border-default);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
  white-space: nowrap;
}

.copy-btn:hover {
  background-color: var(--accent-soft);
}


/* ============================================================
   27. TOGGLE SWITCH (Part 3.2)
   36×20px track; off --border-strong, on --accent; 12px knob
   ============================================================ */
.toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 36px;
  height: 20px;
  cursor: pointer;
}

.toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-track {
  width: 36px;
  height: 20px;
  background-color: var(--border-strong);
  border-radius: var(--radius-full);
  transition: background-color var(--duration-base) var(--ease-standard);
  position: relative;
}

.toggle-track::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 12px;
  height: 12px;
  background-color: var(--surface-raised);
  border-radius: var(--radius-full);
  transition: transform var(--duration-base) var(--ease-standard);
}

.toggle input:checked + .toggle-track {
  background-color: var(--accent);
}

.toggle input:checked + .toggle-track::after {
  transform: translateX(16px);
}

.toggle input:focus-visible + .toggle-track {
  box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--focus-ring);
}


/* ============================================================
   28. RESPONSIVE BREAKPOINTS (Part 2.6)
   ============================================================ */

/* Tablet */
@media (max-width: 768px) {
  .text-display { font-size: 40px; }
  h1, .text-h1 { font-size: 32px; }
  h2, .text-h2 { font-size: 24px; }
  h3, .text-h3 { font-size: 20px; }

  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }

  .container {
    padding: 0 var(--space-4);
  }

  .hide-tablet { display: none; }
}

/* Mobile */
@media (max-width: 480px) {
  .text-display { font-size: 36px; }
  h1, .text-h1 { font-size: 28px; }
  h2, .text-h2 { font-size: 22px; }

  .grid-2,
  .grid-3,
  .grid-4 { grid-template-columns: 1fr; }

  .container {
    padding: 0 var(--space-4);
  }

  .hide-mobile { display: none; }

  .btn-lg {
    height: 44px;
    font-size: var(--text-body);
    padding: 0 var(--space-5);
  }

  /* Phase indicator collapse */
  .phase-indicator { display: none; }
  .phase-mobile-label { display: block; }
}

/* Small Mobile (320px critical for portals) */
@media (max-width: 360px) {
  .text-display { font-size: 30px; }
  h1, .text-h1 { font-size: 24px; }
}

/* Wide Desktop */
@media (min-width: 1281px) {
  .container-wide {
    max-width: var(--container-dashboard);
  }
}


/* ============================================================
   29. MOTION: Entrance Animation
   translateY(8px) + fade, --ease-editorial
   ============================================================ */
@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .animate-reveal {
    animation: reveal var(--duration-slow) var(--ease-editorial) both;
  }

  /* Stagger: 40ms between items, max 8 */
  .stagger-1 { animation-delay: 40ms; }
  .stagger-2 { animation-delay: 80ms; }
  .stagger-3 { animation-delay: 120ms; }
  .stagger-4 { animation-delay: 160ms; }
  .stagger-5 { animation-delay: 200ms; }
  .stagger-6 { animation-delay: 240ms; }
  .stagger-7 { animation-delay: 280ms; }
  .stagger-8 { animation-delay: 320ms; }
}

@media (prefers-reduced-motion: reduce) {
  .animate-reveal {
    animation: none;
    opacity: 1;
    transform: none;
  }
}


/* ============================================================
   30. SCROLLBAR (Subtle, on-brand)
   ============================================================ */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--border-strong);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-tertiary);
}


/* ============================================================
   31. SELECTION HIGHLIGHT
   ============================================================ */
::selection {
  background-color: var(--accent-soft);
  color: var(--text-primary);
}


/* ============================================================
   32. FOCUS VISIBLE (Part 8.1)
   2px --focus-ring outline, offset 2px
   ============================================================ */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring);
  outline-offset: 2px;
}

/* Inputs already have their own focus ring */
.input:focus-visible {
  box-shadow: 0 0 0 3px var(--focus-ring);
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}


/* ============================================================
   33. DANGER ZONE (Dashboard settings)
   ============================================================ */
.danger-zone {
  border: 1px solid var(--danger-soft);
  background-color: var(--danger-soft);
  padding: var(--space-5);
}

.danger-zone-title {
  font-family: var(--font-body);
  font-size: var(--text-h4);
  font-weight: 600;
  color: var(--danger);
  margin-bottom: var(--space-2);
}

.danger-zone-desc {
  font-size: var(--text-body);
  color: var(--text-secondary);
  margin-bottom: var(--space-5);
  line-height: 1.55;
}


/* ============================================================
   34. TRIAL BANNER
   --info-soft strip; mono TRIAL eyebrow
   ============================================================ */
.trial-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background-color: var(--info-soft);
  border: 1px solid var(--border-default);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.trial-banner-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--info);
  margin-bottom: var(--space-1);
}

.trial-banner-text {
  font-size: var(--text-body);
  color: var(--text-primary);
}