@import url('/third-party/roboto/roboto.css');

/* ============================================================
   CSS Custom Properties — Light Theme
   ============================================================ */
:root {
  /* Brand */
  --md-primary: #1a73e8;
  --md-primary-dark: #1557b0;
  --md-primary-light: #4a9cf5;
  /* Surfaces */
  --md-background: #f8f9fc;
  --md-surface: #ffffff;
  --md-card-bg: #ffffff;
  /* Text */
  --md-on-surface: #1f2024;
  --md-on-surface-secondary: #5f6368;
  /* UI chrome */
  --md-border: #e2e5ea;
  --md-shadow: 0 1px 4px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --md-shadow-raised: 0 2px 8px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.06);
  --md-navbar-bg: #1a73e8;
  --md-navbar-text: #ffffff;
  --md-sidebar-bg: #1a237e;
  /* Inputs */
  --md-input-bg: #ffffff;
  --md-input-border: #dde1e7;
  --md-input-focus: rgba(26,115,232,0.14);
  /* Status */
  --md-success: #34a853;
  --md-danger: #ea4335;
  --md-warning: #fbbc04;
  --md-info: #1a73e8;
  /* Toggle button (on navbar) */
  --md-toggle-color: rgba(255,255,255,0.85);
  --md-toggle-hover: rgba(255,255,255,1);
}

/* ============================================================
   Dark Theme — applied by theme.js via .dark-theme class.
   JS handles OS preference detection so no CSS media query
   is needed (avoids the "can't force light on a dark OS" bug).
   ============================================================ */
html.dark-theme {
  --md-background: #111118;
  --md-surface: #1c1c27;
  --md-card-bg: #242433;
  --md-on-surface: #e4e6ea;
  --md-on-surface-secondary: #9aa0a6;
  --md-border: #2e3139;
  --md-shadow: 0 1px 4px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.25);
  --md-shadow-raised: 0 2px 10px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.30);
  --md-navbar-bg: #17192a;
  --md-sidebar-bg: #0f1428;
  --md-input-bg: #252535;
  --md-input-border: #3a3d47;
  --md-input-focus: rgba(138,180,248,0.16);
  --md-primary: #8ab4f8;
  --md-primary-dark: #669df6;
  --md-toggle-color: rgba(255,255,255,0.7);
  --md-toggle-hover: rgba(255,255,255,0.95);
}

/* ============================================================
   Base reset
   ============================================================ */
*, :after, :before {
  box-sizing: border-box;
}

body, html {
  height: 100%;
}

body {
  margin: 0;
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--md-on-surface-secondary);
  background-color: var(--md-background);
  text-align: left;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

textarea {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.55;
}

h1 {
  font-size: 160%;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.inline {
  display: inline;
}

/* ============================================================
   Footer signature — nearly invisible
   ============================================================ */
.signature {
  border-top: 1px solid var(--md-border);
  padding: 0.35rem 1rem;
  text-align: center;
  font-size: 0.6rem;
  color: var(--md-on-surface-secondary);
  opacity: 0.25;
  letter-spacing: 0.05em;
  min-height: auto;
  clear: both;
}

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