@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* -------------------------------------------------
   CORE TOKENS + THEME
   Modern minimal + Flat 2.0
   ------------------------------------------------- */

:root {
  /* -------------------------------------------------
     GRAYS / NEUTRALS
     ------------------------------------------------- */
  --gray-50:  #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5f5;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  /* -------------------------------------------------
     SPACING
     ------------------------------------------------- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* -------------------------------------------------
     RADII
     ------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* -------------------------------------------------
     SHADOWS
     ------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 8px rgba(15, 23, 42, 0.10);

  /* -------------------------------------------------
     TRANSITIONS
     ------------------------------------------------- */
  --transition-fast: all 150ms ease-out;
  --transition-base: all 200ms ease-out;

  /* -------------------------------------------------
     LIGHT MODE SURFACES
     ------------------------------------------------- */
  --bg: #f8fafc;             /* page background */
  --bg-subtle: #f1f5f9;      /* subtle sections */
  --bg-elevated: #ffffff;    /* cards, nav, panels */

  --border-subtle: #e2e8f0;

  --text-main: #0f172a;
  --text-muted: #64748b;

  /* Global helpers */
  --color-bg: var(--bg);
  --color-fg: var(--text-main);

  /* Text helpers for components */
  --text-on-primary: var(--color-on-primary);
  --text-on-secondary: var(--color-on-secondary);

  /* Sidebar helpers */
  --sidebar-bg: var(--bg-elevated);
  --sidebar-text: var(--text-main);
  --sidebar-text-muted: var(--text-muted);
}

/* -------------------------------------------------
   DARK MODE
   (Surfaces only — brand colors come from ThemeEngine)
   ------------------------------------------------- */

[data-theme="dark"] {
  /* Surface scale */
  --surface-0: #020617;
  --surface-1: #0f172a;
  --surface-2: #1e293b;
  --surface-3: #334155;

  /* Borders */
  --border-0: #1e293b;
  --border-1: #334155;

  /* Text */
  --text-0: #f1f5f9;
  --text-1: #cbd5e1;
  --text-2: #94a3b8;

  /* Global */
  --color-bg: var(--surface-0);
  --color-fg: var(--text-0);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.6);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.7);

  /* Sidebar */
  --sidebar-bg: var(--surface-1);
  --sidebar-text: var(--text-0);
  --sidebar-text-muted: var(--text-2);

  /* Footer nav */
  --footer-bg: var(--surface-1);
  --footer-border: var(--border-0);

  /* More menu */
  --sheet-bg: var(--surface-2);
  --sheet-border: var(--border-1);
}


/* -------------------------------------------------
   GLOBAL ELEMENTS
   ------------------------------------------------- */

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

body {
  -webkit-font-smoothing: antialiased;
}

/* Links  
a {
  color: var(--color-primary-hover);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}
*/

a {
  color: var(--color-secondary, var(--color-primary));
  text-decoration: none;
  font-weight: 500;
}

a:hover {
  /*color: var(--color-primary-hover, var(--color-primary));*/
  color: var(--color-secondary-hover, var(--color-secondary));
  text-decoration: underline;
}



/* Headings */
h1, h2, h3, h4 {
  margin: 0 0 var(--space-md);
  font-weight: 600;
  color: var(--text-main);
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }

/* Page container helper */
.pc-page {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-lg);
}

/* Scroll behavior */
html {
  scroll-behavior: smooth;
}