/* =============================================================
   Achieva — Design Tokens (Colors + Typography)
   -------------------------------------------------------------
   Adapted for Achieva Bucks from the Achieva Design System
   (colors_and_type.css). Product UI uses Inter only — the
   brand-book marketing faces (Sofia Pro / Merriweather / Muli)
   are intentionally not loaded here.
   ============================================================= */

/* Inter — used by all Achieva product apps. Pulled from Google Fonts. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ── Brand colors (from the brand book + color-pallet.png) ── */
  --teal:          #006269;  /* 01 Achieva Teal — PMS 7715 C */
  --purple:        #72246c;  /* 02 Purple        — PMS 255  C */
  --gold:          #ffb81c;  /* 03 Gold          — PMS 1235 C */
  --green:         #7a9a01;  /* 04 Green         — PMS 377  C */
  --red:           #ba0c2f;  /* 05 Red           — PMS 200  C */
  --soft-teal:     #b6cfd0;  /* 06 Soft Teal     — PMS 5523 C */
  --soft-gray:     #d9d9d6;  /* 07 Soft Gray     — PMS Cool Gray 1 C */

  /* ── Working shades (extrapolated, used by both Flask apps) ── */
  --teal-dark:     #004d52;
  --teal-light:    #007d86;
  --purple-light:  #8a3082;
  --gold-dark:     #e6a418;
  --green-light:   #8eb002;
  --red-light:     #d00e36;

  /* ── Neutrals ────────────────────────────────────────────── */
  --white:         #ffffff;
  --gray-50:       #f7f8f9;
  --gray-100:      #f0f2f5;
  --gray-200:      #eef0f2;
  --gray-300:      #e0e6eb;
  --gray-400:      #b0b3b8;
  --gray-500:      #6b7c8a;
  --gray-600:      #6b7280;
  --gray-700:      #4b5563;
  --gray-800:      #1f2937;
  --gray-900:      #1c2b33;

  /* ── Foreground / Background semantic ───────────────────── */
  --fg-1:          var(--gray-900);
  --fg-2:          var(--gray-500);
  --fg-3:          var(--gray-400);
  --fg-inverse:    var(--white);
  --fg-brand:      var(--teal);
  --fg-danger:     var(--red);

  --bg-page:       var(--gray-100);
  --bg-card:       var(--white);
  --bg-subtle:     var(--gray-50);
  --bg-brand:      var(--teal);
  --bg-brand-soft: #edf7f7;

  --border:        var(--gray-300);
  --border-strong: var(--gray-400);

  /* ── Status colors ──────────────────────────────────────── */
  --status-success-bg: #edf7ed;
  --status-success-fg: var(--green);
  --status-warning-bg: #fff8e1;
  --status-warning-fg: #856000;
  --status-danger-bg:  #fde8ec;
  --status-danger-fg:  var(--red);
  --status-info-bg:    #e8f4f5;
  --status-info-fg:    var(--teal-dark);

  /* ── Spacing scale (4 px step) ──────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Radii ──────────────────────────────────────────────── */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, .07);
  --shadow:    0 2px 14px rgba(0, 98, 105, .10);
  --shadow-md: 0 6px 28px rgba(0, 98, 105, .14);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .08);

  /* ── Motion ─────────────────────────────────────────────── */
  --ease:        cubic-bezier(.4, 0, .2, 1);
  --duration-1:  120ms;
  --duration-2:  200ms;
  --duration-3:  320ms;
  --transition:  all var(--duration-2) var(--ease);

  /* ── Layout ─────────────────────────────────────────────── */
  --sidebar-w:           264px;
  --sidebar-w-collapsed: 56px;
  --topbar-h:            64px;
  --container-max:       1400px;

  /* ── Typography ─────────────────────────────────────────── */
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, 'Roboto Mono', monospace;

  /* ── Type scale (root = 15px in product UI) ─────────────── */
  --text-xs:   11.5px;
  --text-sm:   12.5px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;

  --leading-tight: 1.15;
  --leading-snug:  1.3;
  --leading-body:  1.6;
  --leading-loose: 1.75;

  --tracking-tight: -0.01em;
  --tracking-wide:  0.06em;
  --tracking-cap:   0.12em;
}

html {
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-page);
  line-height: var(--leading-body);
}

h1, .t-h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  color: var(--fg-1);
}
h2, .t-h2 {
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}
h3, .t-h3 {
  font-weight: 600;
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}

p, .t-body {
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--fg-1);
}

.t-eyebrow,
.t-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-cap);
  text-transform: uppercase;
  color: var(--fg-2);
}

.t-caption,
.t-muted {
  font-size: var(--text-sm);
  color: var(--fg-2);
}

.t-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}