/* ============================================================
   BlackHills.biz Design System — Colors & Typography
   ============================================================ */

/* ------------------------------------------------------------
   SYSTEM FONTS ONLY — no external font dependencies
   Display/headers: system UI stack (SF Pro on Apple, Segoe UI on Windows, etc.)
   Body: same system UI stack — legibility over style
   Mono: system monospace for admin/code surfaces
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   BASE COLOR TOKENS
   Derived from the real BlackHills.biz logo (May 2026)
   
   Logo color reference:
   - "BlackHills" wordmark:  #243d24  (dark forest green)
   - ".biz" wordmark:        #6ab04c  (bright lime green)
   - Mountain peak/light:    #8fbc5a  (sage highlight)
   - Mountain mid layer:     #5a8c3a  (medium green)
   - Mountain dark base:     #2e5c2e  (deep forest)
   - Trees/foreground:       #1a3320  (near-black forest)
   - Circuit pattern:        #4a7a3a  (mid green)
   - Logo background:        #f5f5f0  (off-white)
   - Logo border:            #d0d0cc  (light gray)
   ------------------------------------------------------------ */
:root {
  /* Backgrounds — whiter than v1 so accents pop */
  --color-bg:              #f4f8f2;   /* very pale sage — primary page bg */
  --color-bg-surface:      #fafdf8;   /* panel/sidebar bg — near white */
  --color-bg-card:         #ffffff;   /* cards pure white for max contrast */
  --color-bg-overlay:      rgba(244, 248, 242, 0.95);
  --color-bg-input:        #ffffff;

  /* Borders & Dividers — logo card border as reference */
  --color-border:          #ccd8c8;
  --color-border-strong:   #a4bca0;
  --color-border-subtle:   #ddebd8;

  /* Text — logo "BlackHills" dark forest green */
  --color-text-primary:    #243d24;   /* exact logo wordmark dark green */
  --color-text-secondary:  #4a6a46;
  --color-text-tertiary:   #7a9876;
  --color-text-disabled:   #aabea6;
  --color-text-inverse:    #ffffff;
  --color-text-link:       #2e6e28;
  --color-text-link-hover: #1c4a1a;

  /* Accent / CTA — bolder, deeper saturation */
  --color-accent:          #2f8a1f;   /* deeper, more saturated green */
  --color-accent-hover:    #226815;
  --color-accent-active:   #174a0e;
  --color-accent-subtle:   #c8ecbe;
  --color-accent-text:     #ffffff;

  /* Biz bright — punchier .biz green */
  --color-biz:             #5cb030;   /* more vivid lime */
  --color-biz-hover:       #468b21;
  --color-biz-subtle:      #d8efc8;

  /* Secondary accent — warm gold, deeper */
  --color-gold:            #b87410;
  --color-gold-hover:      #965d08;
  --color-gold-subtle:     #fce8c4;

  /* Tertiary accent — sky blue, more saturated */
  --color-blue:            #1862a8;
  --color-blue-hover:      #0e4a85;
  --color-blue-subtle:     #cce0f4;

  /* Semantic / Status — bolder */
  --color-success:         #2f8a1f;
  --color-success-bg:      #c8ecbe;
  --color-warning:         #b87410;
  --color-warning-bg:      #fce8c4;
  --color-error:           #b8281b;
  --color-error-bg:        #fcdcd8;
  --color-info:            #1862a8;
  --color-info-bg:         #cce0f4;

  /* Neutral scale — green-tinted, derived from logo palette */
  --color-neutral-50:      #f8faf6;
  --color-neutral-100:     #eef4ec;
  --color-neutral-200:     #ddebd8;
  --color-neutral-300:     #ccd8c8;
  --color-neutral-400:     #a4bca0;
  --color-neutral-500:     #7a9876;
  --color-neutral-600:     #5a7456;
  --color-neutral-700:     #3d5039;
  --color-neutral-800:     #243d24;   /* matches logo dark wordmark */
  --color-neutral-900:     #1a2e1a;
}

/* ------------------------------------------------------------
   MODULE COLOR TOKENS
   Each module has an independently adjustable accent color.
   Override these per-component to customize module themes.
   ------------------------------------------------------------ */
:root {
  --module-seo-social:     #1862a8;   /* blue — analytics */
  --module-seo-web:        #0d7d5e;   /* teal — web analysis */
  --module-reputation:     #b87410;   /* gold — trust/reputation */
  --module-scheduler:      #6a3a9e;   /* purple — scheduling */
  --module-story:          #b04018;   /* warm orange — creative/story */
  --module-adgen:          #2f8a1f;   /* green — generation/growth */
  --module-media:          #1862a8;   /* blue — media library */
  --module-cdn:            #0d7d5e;   /* teal — content network */
  --module-onboarding:     #b87410;   /* gold — welcome/onboarding */

  /* Module subtle backgrounds — slightly deeper tints */
  --module-seo-social-bg:  #cce0f4;
  --module-seo-web-bg:     #c0ebde;
  --module-reputation-bg:  #fce8c4;
  --module-scheduler-bg:   #e2d4f2;
  --module-story-bg:       #fcdac8;
  --module-adgen-bg:       #c8ecbe;
  --module-media-bg:       #cce0f4;
  --module-cdn-bg:         #c0ebde;
  --module-onboarding-bg:  #fce8c4;
}

/* ------------------------------------------------------------
   SHADOW / ELEVATION TOKENS
   ------------------------------------------------------------ */
:root {
  --shadow-0:   none;
  --shadow-1:   0 2px 8px rgba(0, 40, 0, 0.07);    /* card */
  --shadow-2:   0 8px 24px rgba(0, 40, 0, 0.12);   /* dropdown/modal */
  --shadow-3:   0 16px 48px rgba(0, 40, 0, 0.16);  /* drawer */
  --shadow-inset: inset 0 1px 3px rgba(0, 40, 0, 0.08);
}

/* ------------------------------------------------------------
   BORDER RADIUS TOKENS
   ------------------------------------------------------------ */
:root {
  --radius-sm:   4px;
  --radius-md:   8px;    /* inputs, buttons */
  --radius-lg:   10px;   /* cards, panels */
  --radius-xl:   16px;   /* large containers */
  --radius-pill: 999px;  /* badges, pills */
}

/* ------------------------------------------------------------
   SPACING SCALE (base 8px)
   ------------------------------------------------------------ */
:root {
  --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-gutter-mobile:  24px;
  --space-gutter-desktop: 32px;
}

/* ------------------------------------------------------------
   TYPOGRAPHY TOKENS
   ------------------------------------------------------------ */
:root {
  /* Font families — system only, no external dependencies */
  --font-display: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'Cascadia Code', 'Menlo', 'Consolas', monospace;

  /* Font weights */
  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* Type scale */
  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  15px;
  --text-md:    16px;
  --text-lg:    18px;
  --text-xl:    22px;
  --text-2xl:   28px;
  --text-3xl:   36px;
  --text-4xl:   48px;
  --text-5xl:   64px;

  /* Line heights */
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-widest:  0.12em;
}

/* ------------------------------------------------------------
   SEMANTIC TYPE STYLES
   ------------------------------------------------------------ */

/* Reset & base */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-4);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-3);
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-3);
}

h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
}

h5, .h5 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
}

h6, .h6 {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-2);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-4);
}

.body-sm {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}

.body-lg {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
}

.label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text-secondary);
}

.caption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-tertiary);
}

.overline {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  background: var(--color-neutral-100);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  color: var(--color-text-primary);
}

a {
  color: var(--color-text-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 150ms ease;
}
a:hover { color: var(--color-text-link-hover); }

/* ------------------------------------------------------------
   COMPONENT BASE STYLES
   ------------------------------------------------------------ */

/* --- Cards --- */
.card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: var(--space-5);
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1;
  padding: 10px var(--space-5);
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
  text-decoration: none;
  white-space: nowrap;
  min-height: 44px;
}

/* Primary buttons = blue across the platform.
   Module accents (green/gold/teal) stay for identity (icons, borders,
   overlines, etc.) but action buttons are blue everywhere. */
.btn-primary {
  background: var(--color-blue);
  color: var(--color-text-inverse);
  border-color: var(--color-blue);
}
.btn-primary:hover {
  background: var(--color-blue-hover);
  border-color: var(--color-blue-hover);
  color: var(--color-text-inverse);
  text-decoration: none;
}
.btn-primary:active {
  background: var(--color-blue-hover);
  box-shadow: var(--shadow-inset);
}

.btn-secondary {
  background: var(--color-bg-card);
  color: var(--color-blue);
  border-color: var(--color-blue);
}
.btn-secondary:hover {
  background: var(--color-blue-subtle);
  color: var(--color-blue-hover);
  text-decoration: none;
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}
.btn-ghost:hover {
  background: var(--color-neutral-100);
  color: var(--color-text-primary);
  text-decoration: none;
}

.btn-gold {
  background: var(--color-gold);
  color: #fff;
  border-color: var(--color-gold);
}
.btn-gold:hover {
  background: var(--color-gold-hover);
  border-color: var(--color-gold-hover);
  color: #fff;
  text-decoration: none;
}

.btn:disabled, .btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-sm {
  font-size: var(--text-sm);
  padding: 7px var(--space-4);
  min-height: 36px;
}

.btn-lg {
  font-size: var(--text-lg);
  padding: 14px var(--space-6);
  min-height: 52px;
}

/* --- Badges / Pills --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  line-height: 1.4;
  white-space: nowrap;
}

.badge-success  { background: var(--color-success-bg); color: var(--color-success); }
.badge-warning  { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-error    { background: var(--color-error-bg);   color: var(--color-error);   }
.badge-info     { background: var(--color-info-bg);    color: var(--color-info);    }
.badge-neutral  { background: var(--color-neutral-200); color: var(--color-neutral-700); }

/* --- Form inputs --- */
.input, .select, .textarea {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  color: var(--color-text-primary);
  background: var(--color-bg-input);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 9px var(--space-4);
  min-height: 44px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  outline: none;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}
.input::placeholder { color: var(--color-text-tertiary); }

/* --- AI Status Indicators --- */
.ai-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.ai-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ai-status.online  .ai-status-dot { background: var(--color-success); }
.ai-status.queued  .ai-status-dot { background: var(--color-warning); }
.ai-status.fallback .ai-status-dot { background: #e07820; }
.ai-status.offline .ai-status-dot { background: var(--color-error); }

/* --- Progress bar (long-running AI tasks) --- */
.progress-bar {
  width: 100%;
  height: 6px;
  background: var(--color-neutral-200);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: var(--radius-pill);
  transition: width 400ms ease;
}

/* --- Mountain background texture utility --- */
.bg-mountains {
  background-image: url('mountain-bg.svg');
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% auto;
}