/* ─── FONTS ─────────────────────────────────────────────────── */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/Lora-VariableFont_wght.woff2') format('woff2');
}

@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/Lora-Italic-VariableFont_wght.woff2') format('woff2');
}

@font-face {
  font-family: 'Mona Sans';
  font-style: normal;
  font-weight: 300 700;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url('../fonts/MonaSans-VariableFont_wdth,wght.woff2') format('woff2');
}

@font-face {
  font-family: 'Mona Sans';
  font-style: italic;
  font-weight: 300 700;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url('../fonts/MonaSans-Italic-VariableFont_wdth,wght.woff2') format('woff2');
}

/* ─── DARK THEME (default) ───────────────────────────────────── */
:root,
[data-theme="dark"] {
  /* Surfaces */
  --bg-base:        #0e0e10;
  --bg-surface:     #17171a;
  --bg-elevated:    #1f1f23;
  --bg-overlay:     #27272c;
  --bg-hover:       rgba(255,255,255,0.05);
  --bg-active:      rgba(255,255,255,0.08);

  /* Borders */
  --border-subtle:  rgba(255,255,255,0.07);
  --border-default: rgba(255,255,255,0.12);
  --border-strong:  rgba(255,255,255,0.20);

  /* Text */
  --text-primary:   #f0f0f2;
  --text-secondary: #8e8e96;
  --text-tertiary:  #58585f;
  --text-disabled:  #3a3a40;

  /* Accent */
  --accent:         #e8602c;
  --accent-soft:    rgba(232, 96, 44, 0.15);
  --accent-hover:   #f0703a;

  /* Blue (note colour) */
  --note-blue:      #4b9eff;
  --note-blue-soft: rgba(75, 158, 255, 0.15);

  /* Status */
  --success:        #3ecf6e;
  --warning:        #f0a830;
  --error:          #f05050;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.7);

  /* Scrollbar */
  --scrollbar-track: var(--bg-surface);
  --scrollbar-thumb: var(--bg-overlay);
}

/* ─── LIGHT THEME ────────────────────────────────────────────── */
[data-theme="light"] {
  --bg-base:        #f5f5f7;
  --bg-surface:     #ffffff;
  --bg-elevated:    #f0f0f3;
  --bg-overlay:     #e6e6ea;
  --bg-hover:       rgba(0,0,0,0.04);
  --bg-active:      rgba(0,0,0,0.07);

  --border-subtle:  rgba(0,0,0,0.06);
  --border-default: rgba(0,0,0,0.10);
  --border-strong:  rgba(0,0,0,0.18);

  --text-primary:   #1a1a1e;
  --text-secondary: #62626a;
  --text-tertiary:  #a0a0a8;
  --text-disabled:  #c8c8ce;

  --accent:         #e8602c;
  --accent-soft:    rgba(232, 96, 44, 0.10);
  --accent-hover:   #d45220;

  --note-blue:      #2979e8;
  --note-blue-soft: rgba(41, 121, 232, 0.10);

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.12);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.18);

  --scrollbar-track: var(--bg-elevated);
  --scrollbar-thumb: var(--border-default);
}

/* ─── TYPOGRAPHY SCALE ───────────────────────────────────────── */
:root {
  --font-sans:  'Mona Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: 'Lora', Georgia, serif;
  --font-mono:  'SF Mono', 'Fira Code', monospace;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;

  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;

  --leading-tight:  1.2;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  18px;
  --radius-full: 9999px;

  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 320ms ease;

  /* Layout dimensions */
  --header-height:    52px;
  --sidebar-width:    210px;
  --infopanel-width:  360px;
}

/* ─── GLOBAL SCROLLBAR ───────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-full);
}