/* css/tokens.css — Design tokens for NotionRhino
   Light mode is the default. Dark overrides follow at the bottom.
*/

/* ─── Fonts ─────────────────────────────────────────────────────── */
:root {
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "JetBrains Mono", "Fira Code", monospace;

  /* ─── Gray scale ────────────────────────────────────────────── */
  --gray-100: #f9f9f8;
  --gray-200: #f6f5f4;
  --gray-300: #dfdcd9;
  --gray-400: #a39e98;
  --gray-500: #78736f;
  --gray-600: #615d59;
  --gray-700: #494744;
  --gray-800: #31302e;
  --gray-900: #191918;

  /* ─── Semantic UI tokens ─────────────────────────────────────── */
  --text-primary:   #373530;
  --text-secondary: #787774;
  --text-muted:     #a39e98;

  --bg-page:    #ffffff;
  --bg-sidebar: #f9f9f8;
  --bg-hover:   #f9f9f8;
  --bg-card:    #ffffff;
  --bg-nav:     rgba(255, 255, 255, 0.92);
  --bg-overlay: rgba(255, 255, 255, 0.97);

  --border:        rgba(0, 0, 0, 0.08);
  --border-strong: rgba(55, 53, 47, 0.16);

  /* ─── Primary button (inverts in dark mode) ─────────────────── */
  --btn-primary-bg:    #191918;
  --btn-primary-color: #ffffff;
  --btn-primary-hover: #31302e;

  /* ─── Content semantic colors ────────────────────────────────── */
  --blue-bg:    #e9f3f7;
  --blue-text:  #487ca5;
  --teal-bg:    #f2fafa;
  --teal-text:  #2d7d79;
  --yellow-bg:  #fff5e0;
  --yellow-text:#c78600;
  --green-bg:   #eef3ed;
  --green-text: #548164;
  --red-bg:     #fef3f1;
  --red-text:   #c4554d;

  /* ─── Layout ─────────────────────────────────────────────────── */
  --nav-h:       64px;
  --scroll-pad:  80px;
  --pad-h:       16px;
  --pad-v:       32px;
  --max-section: 1252px;
  --max-hero:    960px;

  /* ─── Radius ─────────────────────────────────────────────────── */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-full: 9999px;

  /* ─── Spacing ────────────────────────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
}

/* ─── Responsive layout tokens ───────────────────────────────────── */
@media (min-width: 400px) {
  :root { --pad-h: 32px; }
}
@media (min-width: 600px) {
  :root {
    --pad-h: max(32px, 7.22223vw);
    --pad-v: 64px;
  }
}

/* ─── Dark mode overrides ────────────────────────────────────────── */
/* Applied when OS is dark AND no explicit override is set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --text-primary:   #D4D4D4;
    --text-secondary: #9B9B9B;
    --text-muted:     rgba(255, 255, 255, 0.4);

    --bg-page:    #191919;
    --bg-sidebar: #1E1E1E;
    --bg-hover:   #252525;
    --bg-card:    #31302e;
    --bg-nav:     rgba(25, 25, 25, 0.92);
    --bg-overlay: rgba(25, 25, 25, 0.97);

    --border:        rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.16);

    --btn-primary-bg:    #D4D4D4;
    --btn-primary-color: #191919;
    --btn-primary-hover: #b8b5b0;

    --blue-bg:    #1F282D;
    --blue-text:  #447ACB;
    --teal-bg:    #1c2e2d;
    --teal-text:  #3d9d98;
    --yellow-bg:  #372E20;
    --yellow-text:#C19138;
    --green-bg:   #242B26;
    --green-text: #4F9768;
    --red-bg:     #332523;
    --red-text:   #BE524B;
  }
}

/* Applied when the user has explicitly chosen dark */
[data-theme="dark"] {
  --text-primary:   #D4D4D4;
  --text-secondary: #9B9B9B;
  --text-muted:     rgba(255, 255, 255, 0.4);

  --bg-page:    #191919;
  --bg-sidebar: #1E1E1E;
  --bg-hover:   #252525;
  --bg-card:    #31302e;
  --bg-nav:     rgba(25, 25, 25, 0.92);
  --bg-overlay: rgba(25, 25, 25, 0.97);

  --border:        rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);

  --btn-primary-bg:    #D4D4D4;
  --btn-primary-color: #191919;
  --btn-primary-hover: #b8b5b0;

  --blue-bg:    #1F282D;
  --blue-text:  #447ACB;
  --teal-bg:    #1c2e2d;
  --teal-text:  #3d9d98;
  --yellow-bg:  #372E20;
  --yellow-text:#C19138;
  --green-bg:   #242B26;
  --green-text: #4F9768;
  --red-bg:     #332523;
  --red-text:   #BE524B;
}

/* ─── Theme pill component ───────────────────────────────────────── */
.theme-toggle {
  display: none;
  align-items: center;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: 2px;
  gap: 2px;
}

@media (min-width: 600px) {
  .theme-toggle { display: flex; }
}

.theme-btn {
  background: transparent;
  border: none;
  border-radius: var(--r-full);
  padding: 3px 10px;
  font-size: 12px;
  font-family: var(--font-sans);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease, box-shadow 100ms ease;
  line-height: 1.4;
}

.theme-btn.active {
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}