@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

/* Base Spacing */
:root {
  /* Spacing */
  --base-spacing: 14px;
  --font-size-base: 16px;
  
  /* Colors - Light Theme */
  --color-bg: #ffffff;
  --color-text: rgba(10, 10, 10, 0.85);
  --color-text-muted: rgba(10, 10, 10, 0.5);
  --color-primary: #0a0a0a;
  --color-danger: #b35555;
  --color-success: #44654a;
  --color-warning: #c49a2a;
  --color-highlight: yellow;
  --color-green-mute: #8a9a92;
  --color-red: #b35555;
  
  /* Borders & Shadows - Light Theme */
  --color-border: rgba(0, 0, 0, 0.1);
  --color-border-hover: rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.1);
  
  /* UI Elements - Light Theme */
  --header-bg: #ececed;
  --color-box: white;
  --input-bg: white;
  --surface-subtle: #f5f5f5;

  --tooltip-bg: #e3e7e5;
  --tooltip-text: #525c57;

  /* Tables */
  --table-td-even-bg: #f5f5f7;
  --table-td-odd-bg: #f1f1f3;
  --table-td-hover-bg: #e5e5e6;
  --table-td-drafts-bg: #eeebe7;
  
  /* Button States - Light Theme */
  --button-bg: #fafbfc;
  --button-bg-hover: #f3f4f6;
  --button-text: var(--color-text);
  --button-border: rgba(0, 0, 0, 0.1);
  --button-border-hover: rgba(0, 0, 0, 0.15);
  --button-shadow: var(--shadow-sm);
  --button-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.08);
  
  /* Primary Button - Light Theme */
  --button-primary-bg: #0a0a0a;
  --button-primary-text: #ffffff;
  --button-primary-border: #0a0a0a;
  --button-primary-hover: #1a1a1a;
  --button-primary-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.2);
  
  /* Radii — hard edges throughout */
  --box-radius: 0px;
  --form-radius: 0px;
  --button-radius: 0px;
  
  /* Typography */
  --font-stack-sans-serif: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, avenir next, avenir, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
  --font-stack-serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --font-stack-monospace: 'Roboto Mono', monospace;

  /* SlimSelect */
  /* SlimSelect Variables - Colors */
  --ss-primary-color: var(--color-primary);
  --ss-bg-color: var(--input-bg);
  --ss-font-color: var(--color-text);
  --ss-border-color: var(--color-border);
  --ss-font-placeholder-color: var(--color-text-muted);
  --ss-disabled-color: rgba(0, 0, 0, 0.3);

  /* SlimSelect Variables - Dimensions */
  --ss-main-height: 38px;
  --ss-content-height: 300px;
  --ss-spacing-l: 0.75rem;
  --ss-spacing-m: 0.5rem;
  --ss-spacing-s: 0.25rem;

  /* SlimSelect Variables - Other */
  --ss-border-radius: var(--form-radius);
  --ss-animation-timing: 0.15s;
  --ss-font-size-main: 0.9rem;
  --ss-font-size-option: 0.9rem;

}

/* Breadcrumb — page-level navigation trail. Use on a <div> or <p> (not <nav>,
   which picks up global padding). Built-in bottom margin; no manual mb* needed. */
.breadcrumb {
  font-family: var(--font-stack-monospace);
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  line-height: 1;
  margin: 0 0 calc(var(--base-spacing) * 0.5) 0;
  display: block;
}

.breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--color-text);
}

/* Section label — uppercase monospace label for card/box section headers,
   stat labels, and panel headings inside the app. */
.section-label {
  font-family: var(--font-stack-monospace);
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  line-height: 1;
  margin: 0;
  display: block;
}

.section-label a {
  color: inherit;
  text-decoration: none;
}

.section-label a:hover {
  color: var(--color-text);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #333;
    --color-text: rgba(255, 255, 255, 0.9);
    --color-text-muted: rgba(255, 255, 255, 0.55);
    --color-border: rgba(255, 255, 255, 0.1);
    --color-border-hover: rgba(255, 255, 255, 0.2);
    --header-bg: #2a2a2a;
    --color-box: #444;
    --input-bg: #3d3d3d;
    --tooltip-bg: #3a3a3a;
    --tooltip-text: rgba(255, 255, 255, 0.8);
    --surface-subtle: rgba(255, 255, 255, 0.08);
    --table-td-even-bg: #3a3a3a;
    --table-td-odd-bg: #383838;
    --table-td-hover-bg: #424242;
    --table-td-drafts-bg: #3d3830;
    --button-bg: #3d3d3d;
    --button-bg-hover: #484848;
    --button-text: rgba(255, 255, 255, 0.9);
    --button-border: rgba(255, 255, 255, 0.12);
    --button-border-hover: rgba(255, 255, 255, 0.2);
    /* Primary Button — keep legible in dark mode */
    --button-primary-bg: #ffffff;
    --button-primary-text: #0a0a0a;
    --button-primary-border: #ffffff;
    --button-primary-hover: #e0e0e0;

    --ss-bg-color: var(--input-bg);
    --ss-font-color: var(--color-text);
    --ss-border-color: var(--color-border);
    --ss-font-placeholder-color: var(--color-text-muted);
    --ss-disabled-color: rgba(255, 255, 255, 0.3);
  }
}