/* ──────────────────────────────────────────────────────────────────────────
   Valence Design Tokens
   The single source of truth for colors, type, spacing, radii, shadows,
   and motion. Import this file in every HTML deliverable.
   ────────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
  /* ─── Color: Brand ─────────────────────────────────────────────────── */
  --va-slate:        #2C3E50;
  --va-slate-deep:   #1F2D3D;
  --va-copper:       #B87333;
  --va-copper-deep:  #8B5A2B;
  --va-copper-soft:  rgba(184, 115, 51, 0.10);

  /* ─── Color: Surfaces (light) ──────────────────────────────────────── */
  --va-bg:           #FAFBFC;
  --va-bg-card:      #FFFFFF;
  --va-bg-sunken:    #F2F4F7;

  /* ─── Color: Text (light) ──────────────────────────────────────────── */
  --va-text-primary:    #2C3E50;
  --va-text-secondary:  #6B7784;
  --va-text-tertiary:   #9AA4B0;
  --va-text-on-accent:  #FFFFFF;

  /* ─── Color: Hairlines ─────────────────────────────────────────────── */
  --va-divider:      rgba(44, 62, 80, 0.12);
  --va-divider-soft: rgba(44, 62, 80, 0.06);

  /* ─── Color: Status (use only for status, never decoration) ─────────── */
  --va-success: #3D9970;
  --va-warn:    #D9A441;
  --va-danger:  #C44C4C;

  /* ─── Gradient: signature accent ───────────────────────────────────── */
  --va-gradient-accent: linear-gradient(135deg, #B87333 0%, #8B5A2B 100%);

  /* ─── Type: families ───────────────────────────────────────────────── */
  --va-font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --va-font-text:    'Inter', system-ui, -apple-system, sans-serif;
  --va-font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ─── Type: roles (size / line-height / weight / tracking) ─────────── */
  --va-display-size: 30px;
  --va-display-lh:   1.15;
  --va-display-weight: 700;
  --va-display-track: -0.02em;

  --va-headline-size: 22px;
  --va-headline-lh:   1.25;
  --va-headline-weight: 700;
  --va-headline-track: -0.01em;

  --va-title-size:   17px;
  --va-title-lh:     1.35;
  --va-title-weight: 600;

  --va-body-size:    15px;
  --va-body-lh:      1.45;
  --va-body-weight:  400;

  --va-label-size:   13px;
  --va-label-lh:     1.3;
  --va-label-weight: 500;

  --va-section-size:    11px;
  --va-section-lh:      1.2;
  --va-section-weight:  600;
  --va-section-track:   0.08em;

  /* ─── Spacing: 4-pt grid ───────────────────────────────────────────── */
  --va-space-xs:  4px;
  --va-space-s:   8px;
  --va-space-m:   12px;
  --va-space-l:   16px;
  --va-space-xl:  24px;
  --va-space-xxl: 40px;

  /* ─── Radii ────────────────────────────────────────────────────────── */
  --va-radius-s:    8px;
  --va-radius-m:    12px;
  --va-radius-l:    16px;
  --va-radius-xl:   22px;
  --va-radius-pill: 999px;

  /* ─── Elevation ────────────────────────────────────────────────────── */
  --va-shadow-card:    0 2px 8px rgba(44, 62, 80, 0.06);
  --va-shadow-frosted: 0 4px 12px -2px rgba(0, 0, 0, 0.08);
  --va-shadow-pop:     0 8px 24px rgba(44, 62, 80, 0.18);

  /* ─── Frosted-glass treatment ──────────────────────────────────────── */
  --va-frost-fill:    rgba(255, 255, 255, 0.60);
  --va-frost-border:  rgba(0, 0, 0, 0.04);
  --va-frost-blur:    blur(12px);

  /* ─── Motion ───────────────────────────────────────────────────────── */
  --va-ease:         cubic-bezier(0.4, 0.0, 0.2, 1);
  --va-dur-fast:     150ms;
  --va-dur-medium:   300ms;
  --va-dur-slow:     500ms;
}

/* ─── Dark theme ─────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --va-bg:           #0F1620;
  --va-bg-card:      #1A2230;
  --va-bg-sunken:    #0A1018;

  --va-text-primary:    #E5EAF0;
  --va-text-secondary:  #9AA4B0;
  --va-text-tertiary:   #6B7784;

  --va-divider:      rgba(255, 255, 255, 0.10);
  --va-divider-soft: rgba(255, 255, 255, 0.05);

  --va-shadow-card:    0 4px 12px rgba(0, 0, 0, 0.25);
  --va-shadow-frosted: 0 4px 12px -2px rgba(0, 0, 0, 0.40);

  --va-frost-fill:    rgba(26, 34, 48, 0.65);
  --va-frost-border:  rgba(255, 255, 255, 0.15);
}

/* ─── Type utility classes ───────────────────────────────────────────── */
.va-display {
  font-family: var(--va-font-display);
  font-size: var(--va-display-size);
  line-height: var(--va-display-lh);
  font-weight: var(--va-display-weight);
  letter-spacing: var(--va-display-track);
  color: var(--va-text-primary);
}
.va-headline {
  font-family: var(--va-font-display);
  font-size: var(--va-headline-size);
  line-height: var(--va-headline-lh);
  font-weight: var(--va-headline-weight);
  letter-spacing: var(--va-headline-track);
  color: var(--va-text-primary);
}
.va-title {
  font-family: var(--va-font-text);
  font-size: var(--va-title-size);
  line-height: var(--va-title-lh);
  font-weight: var(--va-title-weight);
  color: var(--va-text-primary);
}
.va-body {
  font-family: var(--va-font-text);
  font-size: var(--va-body-size);
  line-height: var(--va-body-lh);
  font-weight: var(--va-body-weight);
  color: var(--va-text-primary);
}
.va-label {
  font-family: var(--va-font-text);
  font-size: var(--va-label-size);
  line-height: var(--va-label-lh);
  font-weight: var(--va-label-weight);
  color: var(--va-text-secondary);
}
.va-section {
  font-family: var(--va-font-text);
  font-size: var(--va-section-size);
  line-height: var(--va-section-lh);
  font-weight: var(--va-section-weight);
  letter-spacing: var(--va-section-track);
  text-transform: uppercase;
  color: var(--va-text-tertiary);
}

/* ─── Tabular numerals for any metric display ────────────────────────── */
.va-num { font-variant-numeric: tabular-nums; }

/* ─── Accent gradient text (used for the user's name in greetings) ──── */
.va-gradient-text {
  background: var(--va-gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}