/* ---- colors.css ---- */
/* ============================================================
   Ops Navigator — Color tokens · "Ink & Forest" (default theme)
   Forest green is the single brand color, on warm cream + ink
   neutrals. Color is used sparingly and semantically.
   ============================================================ */

:root {
  /* ----- Brand: Forest ----- */
  --cp-primary:        #149B3A;   /* forest — primary brand, active, links, focus, primary CTAs */
  --cp-primary-deep:   #0E7A2C;   /* hover / pressed forest */
  --cp-primary-soft:   #DDF1E3;   /* forest tint — active nav bg, info pills, focus halo */
  --cp-primary-tint:   #EFF8F1;   /* faintest forest wash — selected card bg */

  /* ----- Accent: Bright forest (the "punch" CTA) ----- */
  --cp-accent:         #34C45E;   /* bright forest — Create CTA, highlights, AI shimmer */
  --cp-accent-deep:    #1F8A3D;   /* hover / accent text */
  --cp-accent-soft:    #DDF3E4;   /* accent tint — AI badges, accent pills */

  /* ----- Tertiary tints (rare) ----- */
  --cp-pink:           #FFC0CB;
  --cp-pink-soft:      #FFE3E8;
  --cp-yellow:         #FCE883;
  --cp-yellow-soft:    #FFF8D1;
  --cp-yellow-deep:    #E5C946;

  /* ----- Neutrals: warm grey ramp ----- */
  --cp-ink:            #1A1A1A;   /* primary text, primary buttons, dark surfaces */
  --cp-ink-2:          #3A3A3A;   /* body text */
  --cp-ink-3:          #6B6B6B;   /* muted text, secondary icons */
  --cp-ink-4:          #999999;   /* placeholders, captions */
  --cp-ink-5:          #BCBCBC;   /* disabled */
  --cp-border:         #ECECE8;   /* card / input borders */
  --cp-border-soft:    #F2F1ED;   /* hairline dividers */
  --cp-bg:             #FBF8F1;   /* PAGE BACKGROUND (cream) */
  --cp-surface:        #FFFFFF;   /* cards, inputs, popovers */
  --cp-surface-2:      #F7F5EE;   /* subtle fills, hover bg, segmented track */
  --cp-surface-dark:   #1F1F1F;   /* dark feature blocks */

  /* ----- Semantic (each with -soft companion) ----- */
  --cp-success:        #149B3A;
  --cp-success-soft:   #DDF1E3;
  --cp-warning:        #E59A2B;
  --cp-warning-soft:   #FDEBD0;
  --cp-error:          #D60D02;
  --cp-error-soft:     #FCE7E5;
  --cp-info:           #4A6FBF;
  --cp-info-soft:      #E2EAF7;

  /* ----- Category accents (decorative — folders, journeys, avatars) -----
     Used only as content-category tints, never for interactive state. */
  --cp-cat-teal:       #069494;
  --cp-cat-orange:     #FF8243;
  --cp-cat-gold:       #E5C946;
  --cp-cat-rose:       #A03A4B;
  --cp-cat-blue:       #4A6FBF;
  --cp-cat-violet:     #7C5CD6;
}

/* ----- Alt palette: Retro Sunset (legacy alternate) ----- */
[data-palette="retro"] {
  --cp-primary:        #069494;
  --cp-primary-deep:   #047070;
  --cp-primary-soft:   #D9EFEF;
  --cp-primary-tint:   #F0F8F8;
  --cp-accent:         #FFCE1B;
  --cp-accent-deep:    #E5B100;
  --cp-accent-soft:    #FFF5C1;
  --cp-pink:           #B7410E;
  --cp-pink-soft:      #F5DDD0;
  --cp-yellow:         #BE5103;
  --cp-yellow-soft:    #F2DFCB;
}

/* ----- Dark theme: remaps the neutral ramp, -soft semantics, shadows -----
   Any component that reads tokens works in dark automatically. */
[data-theme="dark"] {
  --cp-ink: #F2F0EA;
  --cp-ink-2: #C5C2BA;
  --cp-ink-3: #908C82;
  --cp-ink-4: #6B675F;
  --cp-ink-5: #4A4640;
  --cp-border: #2A2825;
  --cp-border-soft: #1F1D1B;
  --cp-bg: #131211;
  --cp-surface: #1B1A18;
  --cp-surface-2: #232220;
  --cp-primary-soft: #0E2E2E;
  --cp-primary-tint: #0A1F1F;
  --cp-accent-soft: #3A2412;
  --cp-yellow-soft: #2E2814;
  --cp-pink-soft: #2E1F1F;
  --cp-success-soft: #0F2818;
  --cp-warning-soft: #2E1F0A;
  --cp-error-soft: #2D1311;
  --cp-info-soft: #14213A;
  --cp-shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
  --cp-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.5);
  --cp-shadow-lg: 0 2px 4px rgba(0,0,0,0.5), 0 16px 40px rgba(0,0,0,0.6);
  --cp-shadow-pop: 0 12px 36px rgba(0,0,0,0.7);
}


/* ---- typography.css ---- */
/* ============================================================
   Ops Navigator — Typography tokens, webfonts & type classes
   Primary UI: General Sans. Display: Cabinet Grotesk (800).
   Mono: JetBrains Mono. All @font-face declared here.
   ============================================================ */

/* Mono webfont (Google) */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

/* Cabinet Grotesk — display face, woff2 from Fontshare CDN (offline bundling) */
@font-face { font-family: 'Cabinet Grotesk'; font-weight: 500; font-style: normal; font-display: swap;
  src: url('https://cdn.fontshare.com/wf/CKQBK2QBTCDREE7L3MXZ3PPW7LDNJCWU/OTOY7FQFSFOJVZKJWKO2EHUJLOGBDN4Q/4CO2ETY7NITKLUDKMYJ75RHJSPHOJ7XT.woff2') format('woff2'); }
@font-face { font-family: 'Cabinet Grotesk'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('https://cdn.fontshare.com/wf/XMXWOHABYLQDJ42L65EFRYNVRY37HQCB/B2O4O6V3JMFM2WDCYQI3A47L5U4THDUL/WN5274VQ3AUBDFP74GB4EC4XYJ3EKVNE.woff2') format('woff2'); }
@font-face { font-family: 'Cabinet Grotesk'; font-weight: 800; font-style: normal; font-display: swap;
  src: url('https://cdn.fontshare.com/wf/ZX6AQLSFYVDPN2URWO2MQFGTYYOHIS64/TPYPKOYWFQVNJHLLRXD4KFYX4LUOUW4Z/6QH2ALVTTK7IRVO5MYOQQ3OZNXW5SSS3.woff2') format('woff2'); }

/* General Sans — self-hosted woff2 (Fontshare CDN) for offline bundling */
@font-face { font-family: 'General Sans'; font-weight: 300; font-style: normal; font-display: swap;
  src: url('https://cdn.fontshare.com/wf/HFTXPYOBEE22ON2ZH2TDSTBQLGERA7LU/4AOH2PGTMHZO2YX5HMTOAV52ONC3WIXE/TW4KNQIPR4LNP4I6I6C6HKQ23B2EQAU5.woff2') format('woff2'); }
@font-face { font-family: 'General Sans'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('https://cdn.fontshare.com/wf/MFQT7HFGCR2L5ULQTW6YXYZXXHMPKLJ3/YWQ244D6TACUX5JBKATPOW5I5MGJ3G73/7YY3ZAAE3TRV2LANYOLXNHTPHLXVWTKH.woff2') format('woff2'); }
@font-face { font-family: 'General Sans'; font-weight: 500; font-style: normal; font-display: swap;
  src: url('https://cdn.fontshare.com/wf/3RZHWSNONLLWJK3RLPEKUZOMM56GO4LJ/BPDRY7AHVI3MCDXXVXTQQ76H3UXA63S3/SB2OEB6IKZPRR6JT4GFJ2TFT6HBB6AZN.woff2') format('woff2'); }
@font-face { font-family: 'General Sans'; font-weight: 600; font-style: normal; font-display: swap;
  src: url('https://cdn.fontshare.com/wf/K46YRH762FH3QJ25IQM3VAXAKCHEXXW4/ISLWQPUZHZF33LRIOTBMFOJL57GBGQ4B/3ZLMEXZEQPLTEPMHTQDAUXP5ZZXCZAEN.woff2') format('woff2'); }
@font-face { font-family: 'General Sans'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('https://cdn.fontshare.com/wf/KWXO5X3YW4X7OLUMPO4X24HQJGJU7E2Q/VOWUQZS3YLP66ZHPTXAFSH6YACY4WJHT/NIQ54PVBBIWVK3PFSOIOUJSXIJ5WTNDP.woff2') format('woff2'); }

:root {
  --cp-font:         'General Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cp-font-display: 'Cabinet Grotesk', 'General Sans', system-ui, sans-serif;
  --cp-font-mono:    'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
}

/* ----- Type classes ----- */
.cp-display {
  font-family: var(--cp-font-display);
  font-weight: 800;
  font-size: 32px;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--cp-ink);
  margin: 0;
  text-wrap: pretty;
}
.cp-h1 {
  font-family: var(--cp-font);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.015em;
  color: var(--cp-ink);
  margin: 0;
  line-height: 1.2;
}
.cp-h2 {
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--cp-ink);
  margin: 0;
}
.cp-h3 {
  font-weight: 500;
  font-size: 15px;
  color: var(--cp-ink);
  margin: 0;
}
.cp-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cp-ink-3);
}
.cp-body { font-size: 14px; color: var(--cp-ink-2); line-height: 1.5; }
.cp-muted { color: var(--cp-ink-3); }
.cp-num { font-variant-numeric: tabular-nums; }


/* ---- spacing.css ---- */
/* ============================================================
   Ops Navigator — Spacing, radius, shadow, density tokens
   ============================================================ */

:root {
  /* ----- Radius scale ----- */
  --cp-r-xs: 6px;     /* tiny chips / tags */
  --cp-r-sm: 10px;    /* buttons, inputs (default) */
  --cp-r-md: 14px;    /* segmented tracks, menus */
  --cp-r-lg: 18px;    /* cards (default) */
  --cp-r-xl: 24px;    /* hero panels / banners */
  --cp-r-pill: 999px; /* pills, search, chips, avatars */

  /* ----- Shadows: soft & tinted ----- */
  --cp-shadow-sm:  0 1px 2px rgba(15, 23, 23, 0.06);
  --cp-shadow:     0 1px 2px rgba(15, 23, 23, 0.04), 0 8px 24px rgba(6, 148, 148, 0.06);
  --cp-shadow-lg:  0 2px 4px rgba(15, 23, 23, 0.06), 0 16px 40px rgba(6, 148, 148, 0.10);
  --cp-shadow-pop: 0 12px 36px rgba(15, 23, 23, 0.14);

  /* ----- Spacing scale (4px base, 8px rhythm) ----- */
  --cp-space-1: 4px;
  --cp-space-2: 8px;
  --cp-space-3: 12px;
  --cp-space-4: 16px;
  --cp-space-5: 20px;
  --cp-space-6: 24px;
  --cp-space-8: 32px;
  --cp-space-10: 40px;
  --cp-space-12: 48px;
  --cp-space-16: 64px;
  --cp-space-20: 80px;
}

/* ----- Density: data-density on <html> ----- */
[data-density="compact"] {
  --cp-row-h: 44px;
  --cp-pad-content: 18px 24px;
}
[data-density="comfortable"], :root {
  --cp-row-h: 56px;
  --cp-pad-content: 28px 36px;
}


/* ---- motion.css ---- */
/* ============================================================
   Ops Navigator — Motion tokens & keyframes
   Keep motion subtle and quick. -emph for things that "pop".
   ============================================================ */

:root {
  --cp-ease:      cubic-bezier(0.4, 0, 0.2, 1);   /* @kind other */
  --cp-ease-emph: cubic-bezier(0.2, 0, 0, 1);     /* @kind other */
  --cp-dur-fast:  140ms;   /* @kind other */
  --cp-dur:       200ms;   /* @kind other */
  --cp-dur-slow:  320ms;   /* @kind other */
}

@keyframes cpFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes cpPop {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes cpSlideIn {
  from { transform: translateX(24px); opacity: 0.6; }
  to   { transform: none; opacity: 1; }
}
@keyframes cp-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes cp-pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.5; }
}
@keyframes cp-shimmer {
  0%   { background-position: -300px 0; }
  100% { background-position: 300px 0; }
}
@keyframes cp-spin {
  to { transform: rotate(360deg); }
}
@keyframes cp-text-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}


/* ---- base.css ---- */
/* ============================================================
   Ops Navigator — Base reset & global element styles
   ============================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--cp-font);
  font-feature-settings: 'ss01', 'cv01';
  color: var(--cp-ink);
  background: var(--cp-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, select, textarea { font-family: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; padding: 0; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(120,118,110,0.25); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(120,118,110,0.4); }