/* ==============================================================
   Obsidian Portal — Design Tokens
   Terminal-brutalist. Sharp corners. Hairline borders. No shadow.
   IBM Plex Sans / IBM Plex Mono / Syne.
   ============================================================== */

/* ── Fonts ────────────────────────────────────────────────── */
/* Loaded via <link> in index.html:
   IBM Plex Sans 400/500/600
   IBM Plex Mono 400/500/600
   Syne 600/700                                                  */

/* ── Dark theme (default) ─────────────────────────────────── */
[data-theme="dark"],
:root {
  --bg:              #09090b;
  --surface:         #18181b;
  --surface2:        #1c1c1f;
  --border:          #27272a;
  --border2:         #3f3f46;
  --text:            #fafafa;
  --muted:           #a1a1aa;
  --dim:             #71717a;
  --section-label:   #52525b;

  --input-bg:        #18181b;
  --input-border:    #3f3f46;

  --btn-bg:          #18181b;
  --btn-border:      #3f3f46;
  --btn-hover-bg:    #27272a;

  --card-bg:         #18181b;
  --card-border:     #27272a;
  --card-hover:      #1c1c1f;
  --row-hover:       #1c1c1f;

  --log-bg:          #0c0c0e;
  --overlay:         rgba(0, 0, 0, 0.75);
  --toggle-icon:     #a1a1aa;
  --close-color:     #ef4444;

  /* Status — always used as color + 12% bg + 35% border */
  --green:           #22c55e;
  --amber:           #f59e0b;
  --yellow:          #f59e0b;
  --red:             #ef4444;
  --blue:            #3b82f6;
  --purple:          #a855f7;

  --green-bg:        rgba(34,  197,  94, 0.12);
  --green-border:    rgba(34,  197,  94, 0.35);
  --amber-bg:        rgba(245, 158,  11, 0.12);
  --amber-border:    rgba(245, 158,  11, 0.35);
  --red-bg:          rgba(239,  68,  68, 0.12);
  --red-border:      rgba(239,  68,  68, 0.35);
  --blue-bg:         rgba( 59, 130, 246, 0.12);
  --blue-border:     rgba( 59, 130, 246, 0.35);
  --purple-bg:       rgba(168,  85, 247, 0.12);
  --purple-border:   rgba(168,  85, 247, 0.35);

  /* Fonts */
  --font-sans:    "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", "Consolas", monospace;
  --font-display: "Syne", "IBM Plex Sans", system-ui, sans-serif;

  /* Border-radius: 0 everywhere per spec.
     Exceptions handled via explicit class rules:
     — 3px on thin progress bars (--r-bar)
     — 50%  on status dots (applied inline / per-class)             */
  --r-bar:  3px;
  --r-sm:   0px;
  --r-md:   0px;
  --r-lg:   0px;
  --r-xl:   0px;
  --r-pill: 0px;    /* text badges are squared */

  /* Shadows: forbidden. Two exceptions live in component CSS.      */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  /* Spacing */
  --page-x:      20px;
  --page-gap:    12px;
  --panel-pad-y: 14px;
  --panel-pad-x: 16px;

  /* Transition: 0.15s ease, color/background/border-color/opacity only */
  --t: 0.15s ease;

  /* Accent (blue) */
  --accent:      #3b82f6;
  --accent-bg:   rgba(59,130,246,0.10);
  --accent-border: rgba(59,130,246,0.35);
}

/* ── Light theme ──────────────────────────────────────────── */
[data-theme="light"] {
  --bg:              #ffffff;
  --surface:         #f4f4f5;
  --surface2:        #e4e4e7;
  --border:          #e4e4e7;
  --border2:         #d4d4d8;
  --text:            #09090b;
  --muted:           #52525b;
  --dim:             #71717a;
  --section-label:   #71717a;

  --input-bg:        #ffffff;
  --input-border:    #d4d4d8;

  --btn-bg:          #ffffff;
  --btn-border:      #d4d4d8;
  --btn-hover-bg:    #f4f4f5;

  --card-bg:         #ffffff;
  --card-border:     #e4e4e7;
  --card-hover:      #f4f4f5;
  --row-hover:       #f4f4f5;

  --log-bg:          #fafafa;
  --overlay:         rgba(24, 24, 27, 0.45);
  --toggle-icon:     #52525b;
  --close-color:     #dc2626;

  --green:           #16a34a;
  --amber:           #d97706;
  --yellow:          #d97706;
  --red:             #dc2626;
  --blue:            #2563eb;
  --purple:          #9333ea;

  --green-bg:        rgba(22, 163,  74, 0.10);
  --green-border:    rgba(22, 163,  74, 0.30);
  --amber-bg:        rgba(217, 119,  6, 0.10);
  --amber-border:    rgba(217, 119,  6, 0.30);
  --red-bg:          rgba(220,  38,  38, 0.10);
  --red-border:      rgba(220,  38,  38, 0.30);
  --blue-bg:         rgba( 37,  99, 235, 0.10);
  --blue-border:     rgba( 37,  99, 235, 0.30);
  --purple-bg:       rgba(147,  51, 234, 0.10);
  --purple-border:   rgba(147,  51, 234, 0.30);

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  --accent:        #2563eb;
  --accent-bg:     rgba(37,99,235,0.10);
  --accent-border: rgba(37,99,235,0.30);
}

/* ── Global reset ─────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin:  0;
  padding: 0;
}

html {
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html[data-theme="dark"]  { color-scheme: dark;  background: var(--bg); }
html[data-theme="light"] { color-scheme: light; background: var(--bg); }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
}

/* Monospace utility — data, IDs, emails, timestamps, code */
.mono,
code,
kbd,
pre,
samp {
  font-family: var(--font-mono);
  font-feature-settings: "ss01", "tnum";
  letter-spacing: 0;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

button,
input,
select,
textarea {
  font: inherit;
  color: var(--text);
}

button { cursor: pointer; background: none; border: none; }

[hidden] { display: none !important; }

::selection { background: var(--text); color: var(--bg); }