/* ============================================================
   Bookara Design Tokens — v1.0
   Aesthetic: clean & clear. Neutral surfaces, ONE restrained
   accent, AA+ text contrast everywhere. No decoration noise.
   Import ONCE before any component stylesheet:
     <link rel="stylesheet" href="{% static 'css/tokens.css' %}">
   ============================================================ */

/* ── Self-hosted fonts (downloads of Google Fonts CDN files) ─ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Inter-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/Inter-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/Inter-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Inter-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/PlusJakartaSans-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/PlusJakartaSans-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/PlusJakartaSans-Bold.woff2') format('woff2');
}

:root {
  /* ── Neutrals (the system does 90% of the work) ─────────── */
  --ink-950: #101318;          /* headings on light            */
  --ink-900: #16181d;          /* sidebar / dark chrome        */
  --ink-700: #3d434e;          /* body text                    */
  --ink-500: #6b7280;          /* secondary text               */
  --ink-300: #d1d5db;          /* borders, dividers            */
  --ink-200: #e5e7eb;          /* hairlines                    */
  --ink-100: #f1f2f4;          /* hover fills                  */
  --surface:  #f7f8fa;         /* app background               */
  --card:     #ffffff;         /* cards, panels                */

  /* ── Accent (used sparingly: primary CTA, active nav only) ─ */
  --accent:       #c9a227;     /* warm gold                    */
  --accent-hover: #b08d1f;
  --accent-soft:  #faf5e4;     /* tinted background for chips  */

  /* ── Status ──────────────────────────────────────────────── */
  --success:      #1b7f42;
  --success-soft: #e8f5ec;
  --warning:      #a05a00;
  --warning-soft: #fdf2e2;
  --danger:       #c22b2b;
  --danger-soft:  #fbeaea;
  --info:         #2563a8;
  --info-soft:    #e8f0fa;

  /* ── Typography ──────────────────────────────────────────── */
  --font-display: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;
  /* Contrast-first scale: body 15px/1.55, all text ≥ 4.5:1     */
  /* Mobile minimum: 14px for body text, 12px for labels       */
  --text-xs:   0.75rem;        /* 12px - labels, meta          */
  --text-sm:   0.875rem;       /* 14px - mobile body text min  */
  --text-base: 0.9375rem;      /* 15px - desktop body          */
  --text-md:   1.0625rem;      /* 17px                         */
  --text-lg:   1.25rem;        /* 20px                         */
  --text-xl:   1.5625rem;      /* 25px                         */
  --text-2xl:  1.9375rem;      /* 31px                         */

  /* ── Elevation (subtle — borders carry most separation) ──── */
  --shadow-sm: 0 1px 2px rgba(16,19,24,.06);
  --shadow-md: 0 2px 8px rgba(16,19,24,.08);
  --shadow-lg: 0 8px 24px rgba(16,19,24,.12);

  /* ── Shape & rhythm ──────────────────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  /* spacing = multiples of 4/8 */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* ── Motion ──────────────────────────────────────────────── */
  --ease: cubic-bezier(.2,.6,.25,1);
  --fast: 120ms var(--ease);
  --base: 180ms var(--ease);

  /* ── Component aliases ───────────────────────────────────── */
  --sidebar-bg: var(--ink-900);
  --sidebar-text: #cfd3da;
  --sidebar-text-active: var(--accent);
}

/* ── Dark mode: same structure, inverted neutrals.
      Accent stays gold; status colors brighten slightly.
      Toggle via [data-theme="dark"] on <html>. ─────────────── */
[data-theme="dark"] {
  --ink-950: #f4f5f7;          /* headings on dark             */
  --ink-700: #c6cad2;          /* body text                    */
  --ink-500: #9aa1ac;          /* secondary text               */
  --ink-300: #3a3f49;          /* borders                      */
  --ink-200: #2c313b;          /* hairlines                    */
  --ink-100: #23272f;          /* hover fills                  */
  --surface:  #14171c;
  --card:     #1c2027;

  --accent-soft:  #33290e;

  --success:      #4ade80;  --success-soft: #12291a;
  --warning:      #fbbf24;  --warning-soft: #2e2308;
  --danger:       #f87171;  --danger-soft:  #331617;
  --info:         #7ab3ef;  --info-soft:    #12253c;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 2px 8px rgba(0,0,0,.45);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.5);

  --sidebar-bg: #101318;
  --sidebar-text: #aab0ba;
}

/* ── Base resets every page inherits once tokens are loaded ── */
body {
  background: var(--surface);
  color: var(--ink-700);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  min-height: 100vh;
  overflow-x: hidden;
}
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-display);
  color: var(--ink-950);
  letter-spacing: -0.01em;
  line-height: 1.3;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
a { color: var(--info); }

/* Mobile typography adjustments */
@media (max-width: 768px) {
  body {
    font-size: var(--text-sm);
    line-height: 1.6;
  }
  h1 { font-size: var(--text-xl); }
  h2 { font-size: var(--text-lg); }
  h3 { font-size: var(--text-md); }
  h4 { font-size: var(--text-base); }
  h5, h6 { font-size: var(--text-sm); }
}

@media (max-width: 480px) {
  body {
    font-size: var(--text-sm);
  }
}