/* ============================================================
   CleverThis Design System — Color & Type Foundations
   ------------------------------------------------------------
   Brand: agent command center for shipping with LLMs.
   Foundation: Material Design, tuned to the CleverThis palette.
   - Primary  : Teal   #29A78D  (wordmark)
   - Accent   : Gold   #D4AF37  (angular mark)
   - Neutral  : Gray   #BFBFBF  (mark facet)
   Surfaces are clean white or near-black; accent colors carry
   information and are used liberally on those calm grounds.
   ============================================================ */

/* ---- Webfonts (IBM Plex Sans + Mono) ----
   Substitution flag: font files were not provided. We use IBM
   Plex from Google Fonts — a confident, developer-credible
   superfamily that pairs with the Material foundation. Swap in
   licensed/self-hosted files under fonts/ when available. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Hanken+Grotesk:wght@500;600;700&display=swap');

:root {
  /* ========== BRAND CORE ========== */
  --brand-teal:   #29A78D;
  --brand-gold:   #D4AF37;
  --brand-gray:   #BFBFBF;

  /* ========== PRIMARY (Teal) tonal scale ========== */
  --teal-50:  #E6F6F2;
  --teal-100: #C2E9DF;
  --teal-200: #9BDBCB;
  --teal-300: #6FCBB3;
  --teal-400: #49B79E;
  --teal-500: #29A78D;   /* brand */
  --teal-600: #1F8C76;
  --teal-700: #16705E;
  --teal-800: #0F5446;
  --teal-900: #093A30;

  /* ========== ACCENT (Gold) tonal scale ========== */
  --gold-50:  #FBF6E6;
  --gold-100: #F4E7BF;
  --gold-200: #EBD592;
  --gold-300: #E1C262;
  --gold-400: #DAB549;
  --gold-500: #D4AF37;   /* brand */
  --gold-600: #B7942A;
  --gold-700: #93761F;
  --gold-800: #6E5816;
  --gold-900: #4A3B0E;

  /* ========== NEUTRALS (warm-cool gray) ========== */
  --neutral-0:   #FFFFFF;
  --neutral-25:  #FAFBFB;
  --neutral-50:  #F4F6F6;
  --neutral-100: #E9ECEC;
  --neutral-200: #D9DDDD;
  --neutral-300: #BFC4C4;
  --neutral-400: #9AA0A0;
  --neutral-500: #6E7575;
  --neutral-600: #515857;
  --neutral-700: #3A4140;
  --neutral-800: #242928;
  --neutral-900: #141918;
  --neutral-950: #0C0F0F;
  --neutral-black: #0A0C0C;

  /* ========== SEMANTIC COLORS ========== */
  --success:        #1F8C76;  /* teal-aligned green */
  --success-bg:     #E6F6F2;
  --success-fg:     #0F5446;
  --warning:        #B7942A;  /* gold-aligned amber */
  --warning-bg:     #FBF6E6;
  --warning-fg:     #6E5816;
  --error:          #C5453B;
  --error-bg:       #FCEBE9;
  --error-fg:       #8A2820;
  --info:           #2D7FB8;
  --info-bg:        #E8F2F9;
  --info-fg:        #1B4D70;
  /* agent run states */
  --state-running:  #2D7FB8;
  --state-success:  #1F8C76;
  --state-failed:   #C5453B;
  --state-queued:   #9AA0A0;
  --state-paused:   #B7942A;

  /* ========== LIGHT THEME SURFACES (default) ========== */
  --bg:           var(--neutral-0);
  --bg-subtle:    var(--neutral-25);
  --surface:      var(--neutral-0);
  --surface-2:    var(--neutral-50);
  --surface-3:    var(--neutral-100);
  --surface-inverse: var(--neutral-900);
  --border:       var(--neutral-200);
  --border-strong:var(--neutral-300);
  --divider:      var(--neutral-100);

  /* foreground text */
  --fg1: var(--neutral-900);   /* primary text  */
  --fg2: var(--neutral-600);   /* secondary     */
  --fg3: var(--neutral-500);   /* tertiary/muted*/
  --fg4: var(--neutral-400);   /* disabled/hint */
  --fg-on-teal:  #FFFFFF;
  --fg-on-gold:  #2A2200;
  --fg-inverse:  var(--neutral-25);

  /* interactive */
  --primary:        var(--teal-500);
  --primary-hover:  var(--teal-600);
  --primary-press:  var(--teal-700);
  --primary-subtle: var(--teal-50);
  --accent:         var(--gold-500);
  --accent-hover:   var(--gold-600);
  --accent-press:   var(--gold-700);
  --accent-subtle:  var(--gold-50);
  --focus-ring:     color-mix(in srgb, var(--teal-500) 45%, transparent);

  /* ========== TYPE FAMILIES ========== */
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  /* Display: Hanken Grotesk — rounded grotesque with even, harmonious
     proportions; pairs with Plex Sans body + Plex Mono data. */
  --font-display: 'Hanken Grotesk', var(--font-sans);

  /* ========== TYPE SCALE (Material-derived) ========== */
  /* display */
  --text-display-lg: 700 57px/1.05 var(--font-display);
  --text-display-md: 700 45px/1.08 var(--font-display);
  --text-display-sm: 600 36px/1.12 var(--font-display);
  /* headline */
  --text-h1: 600 32px/1.18 var(--font-sans);
  --text-h2: 600 26px/1.22 var(--font-sans);
  --text-h3: 600 21px/1.28 var(--font-sans);
  --text-h4: 600 18px/1.34 var(--font-sans);
  /* title / label */
  --text-title:    600 16px/1.4 var(--font-sans);
  --text-label-lg: 500 15px/1.4 var(--font-sans);
  --text-label:    500 13px/1.4 var(--font-sans);
  --text-overline: 600 11px/1.4 var(--font-sans);
  /* body */
  --text-body-lg: 400 17px/1.6 var(--font-sans);
  --text-body:    400 15px/1.6 var(--font-sans);
  --text-body-sm: 400 13px/1.55 var(--font-sans);
  --text-caption: 400 12px/1.45 var(--font-sans);
  /* mono / code */
  --text-code:    400 13.5px/1.6 var(--font-mono);
  --text-code-sm: 400 12px/1.55 var(--font-mono);

  /* tracking */
  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:  0.02em;
  --tracking-over:  0.08em;  /* overlines */

  /* ========== SPACING (4px base grid) ========== */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ========== RADII (kept square & crisp) ========== */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-pill: 999px;

  /* ========== ELEVATION (Material-tuned, cool-tinted) ========== */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(12,15,15,.06), 0 1px 1px rgba(12,15,15,.04);
  --elev-2: 0 2px 4px rgba(12,15,15,.07), 0 1px 2px rgba(12,15,15,.05);
  --elev-3: 0 4px 10px rgba(12,15,15,.08), 0 2px 4px rgba(12,15,15,.05);
  --elev-4: 0 10px 24px rgba(12,15,15,.10), 0 4px 8px rgba(12,15,15,.06);
  --elev-5: 0 20px 48px rgba(12,15,15,.14), 0 8px 16px rgba(12,15,15,.08);
  --ring-inset: inset 0 0 0 1px var(--border);

  /* motion */
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(.2, 0, 0, 1);
  --ease-decel: cubic-bezier(0, 0, 0, 1);
  --ease-accel: cubic-bezier(.3, 0, 1, 1);
  --dur-fast: 120ms;
  --dur-med: 200ms;
  --dur-slow: 320ms;
}

/* ============================================================
   DARK THEME — near-black ground, accents carry information
   ============================================================ */
[data-theme="dark"] {
  --bg:           var(--neutral-black);
  --bg-subtle:    var(--neutral-950);
  --surface:      #121615;
  --surface-2:    #181D1C;
  --surface-3:    #202625;
  --surface-inverse: var(--neutral-50);
  --border:       #262D2C;
  --border-strong:#343C3B;
  --divider:      #1E2423;

  --fg1: #EAEEED;
  --fg2: #A7AFAE;
  --fg3: #79817F;
  --fg4: #545B5A;
  --fg-inverse: var(--neutral-900);

  --primary:        var(--teal-400);
  --primary-hover:  var(--teal-300);
  --primary-press:  var(--teal-200);
  --primary-subtle: rgba(41,167,141,.16);
  --accent:         var(--gold-400);
  --accent-hover:   var(--gold-300);
  --accent-press:   var(--gold-200);
  --accent-subtle:  rgba(212,175,55,.16);

  --success-bg: rgba(31,140,118,.18);
  --success-fg: var(--teal-300);
  --warning-bg: rgba(183,148,42,.18);
  --warning-fg: var(--gold-300);
  --error-bg:   rgba(197,69,59,.18);
  --error-fg:   #F0A59E;
  --info-bg:    rgba(45,127,184,.18);
  --info-fg:    #8FC2E5;

  --elev-1: 0 1px 2px rgba(0,0,0,.4);
  --elev-2: 0 2px 6px rgba(0,0,0,.45);
  --elev-3: 0 6px 16px rgba(0,0,0,.5);
  --elev-4: 0 12px 28px rgba(0,0,0,.55);
  --elev-5: 0 24px 56px rgba(0,0,0,.6);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES — apply directly to tags/classes
   ============================================================ */
.ct-display-lg { font: var(--text-display-lg); letter-spacing: var(--tracking-tight); color: var(--fg1); }
.ct-display-md { font: var(--text-display-md); letter-spacing: var(--tracking-tight); color: var(--fg1); }
.ct-display-sm { font: var(--text-display-sm); letter-spacing: var(--tracking-snug);  color: var(--fg1); }

.ct-h1 { font: var(--text-h1); letter-spacing: var(--tracking-snug); color: var(--fg1); }
.ct-h2 { font: var(--text-h2); letter-spacing: var(--tracking-snug); color: var(--fg1); }
.ct-h3 { font: var(--text-h3); color: var(--fg1); }
.ct-h4 { font: var(--text-h4); color: var(--fg1); }

.ct-title    { font: var(--text-title); color: var(--fg1); }
.ct-label-lg { font: var(--text-label-lg); color: var(--fg1); }
.ct-label    { font: var(--text-label); color: var(--fg2); }
.ct-overline { font: var(--text-overline); letter-spacing: var(--tracking-over); text-transform: uppercase; color: var(--fg3); }

.ct-body-lg { font: var(--text-body-lg); color: var(--fg1); }
.ct-body    { font: var(--text-body); color: var(--fg1); }
.ct-body-sm { font: var(--text-body-sm); color: var(--fg2); }
.ct-caption { font: var(--text-caption); color: var(--fg3); }

.ct-code    { font: var(--text-code); color: var(--fg1); }
.ct-code-sm { font: var(--text-code-sm); color: var(--fg2); }

.ct-link { color: var(--primary); text-decoration: none; }
.ct-link:hover { color: var(--primary-hover); text-decoration: underline; text-underline-offset: 2px; }