/* ============================================================
   ProvaNova — Core CSS
   File: styles/core.css
   
   Contains:
   - CSS custom properties (light mode)
   - Dark mode overrides via [data-theme="dark"]
   - Reset & base styles
   - Typography scale
   - Spacing & layout utilities
   - Shared animations & transitions
   - Responsive breakpoints (media queries)
   
   Loaded ONCE in index.html.
   Every screen inherits these automatically.
   Never edit :root variables in any screen file.
   ============================================================ */

/* ============================================================
   CSS CUSTOM PROPERTIES — LIGHT MODE
   ============================================================ */
:root {

  /* --- Colours --- */
  --primary:        #0057FF;
  --primary-light:  #EBF0FF;
  --primary-dark:   #0041CC;

  --secondary:      #00695C;
  --secondary-light:#E0F2EF;
  --secondary-dark: #004D40;

  --accent:         #FFB300;
  --accent-light:   #FFF8E1;
  --accent-dark:    #E65100;

  --error:          #D32F2F;
  --error-light:    #FFEBEE;
  --warning:        #F57C00;
  --warning-light:  #FFF3E0;
  --success:        #00695C;
  --success-light:  #E0F2EF;
  --info:           #0057FF;
  --info-light:     #EBF0FF;

  /* --- Backgrounds & Surfaces --- */
  --bg:             #FAFAFA;
  --surface:        #FFFFFF;
  --surface-2:      #F4F4F6;
  --border:         #E0E0E0;
  --border-light:   #EEEEEE;

  /* --- Text --- */
  --text:           #212121;
  --text-secondary: #757575;
  --text-disabled:  #BDBDBD;
  --text-on-primary:#FFFFFF;

  /* --- Shadows --- */
  --shadow-xs:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.07);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.14), 0 8px 20px rgba(0,0,0,0.08);

  /* --- Border Radius --- */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full:9999px;

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

  /* --- Typography --- */
  --font-base:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-pdf:   'Times New Roman', Times, serif;

  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   28px;
  --text-3xl:   32px;

  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-black:   800;

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-relaxed:1.7;

  /* --- Transitions --- */
  --transition-fast:  150ms ease;
  --transition-base:  220ms ease;
  --transition-slow:  350ms ease;

  /* --- Layout --- */
  --max-width:        1200px;
  --navbar-height:    64px;
  --header-height:    56px;
  --safe-bottom:      env(safe-area-inset-bottom, 0px);
  --safe-top:         env(safe-area-inset-top, 0px);
}

/* ============================================================
   DARK MODE OVERRIDES
   Applied via [data-theme="dark"] on <html>.
   All screens inherit these automatically — no screen
   needs to redeclare these base variables.
   Screen-specific dark tweaks live in each screen's css().
   ============================================================ */
[data-theme="dark"] {
  --primary:        #4D8AFF;
  --primary-light:  #1A2540;
  --primary-dark:   #0057FF;

  --secondary:      #26A69A;
  --secondary-light:#0D2420;
  --secondary-dark: #00695C;

  --accent:         #FFB300;
  --accent-light:   #2A2000;

  --error:          #EF5350;
  --error-light:    #2D0A0A;
  --warning:        #FFA726;
  --warning-light:  #2A1600;
  --success:        #26A69A;
  --success-light:  #0D2420;
  --info:           #4D8AFF;
  --info-light:     #1A2540;

  --bg:             #121212;
  --surface:        #1E1E1E;
  --surface-2:      #2A2A2A;
  --border:         #333333;
  --border-light:   #2A2A2A;

  --text:           #F5F5F5;
  --text-secondary: #AAAAAA;
  --text-disabled:  #555555;
  --text-on-primary:#FFFFFF;

  --shadow-xs:  0 1px 3px rgba(0,0,0,0.30);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.40);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.45);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.50);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.55);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-base);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--text);
  background-color: var(--bg);
  min-height: 100dvh;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#screen-root {
  min-height: 100dvh;
  min-height: 100vh;
  overflow-x: hidden;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

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

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  font-size: inherit;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

ul, ol {
  list-style: none;
}

/* ============================================================
   TYPOGRAPHY UTILITIES
   ============================================================ */
.text-xs      { font-size: var(--text-xs); }
.text-sm      { font-size: var(--text-sm); }
.text-base    { font-size: var(--text-base); }
.text-md      { font-size: var(--text-md); }
.text-lg      { font-size: var(--text-lg); }
.text-xl      { font-size: var(--text-xl); }
.text-2xl     { font-size: var(--text-2xl); }
.text-3xl     { font-size: var(--text-3xl); }

.weight-light    { font-weight: var(--weight-light); }
.weight-regular  { font-weight: var(--weight-regular); }
.weight-medium   { font-weight: var(--weight-medium); }
.weight-semibold { font-weight: var(--weight-semibold); }
.weight-bold     { font-weight: var(--weight-bold); }
.weight-black    { font-weight: var(--weight-black); }

.text-primary   { color: var(--primary); }
.text-secondary { color: var(--text-secondary); }
.text-accent    { color: var(--accent); }
.text-error     { color: var(--error); }
.text-success   { color: var(--success); }

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-start   { display: flex; align-items: center; justify-content: flex-start; }
.flex-wrap    { flex-wrap: wrap; }
.flex-1       { flex: 1; }
.gap-1        { gap: var(--space-1); }
.gap-2        { gap: var(--space-2); }
.gap-3        { gap: var(--space-3); }
.gap-4        { gap: var(--space-4); }
.gap-6        { gap: var(--space-6); }
.gap-8        { gap: var(--space-8); }

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.hidden   { display: none !important; }
.sr-only  {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* ============================================================
   SPACING UTILITIES
   ============================================================ */
.mt-1  { margin-top: var(--space-1); }
.mt-2  { margin-top: var(--space-2); }
.mt-3  { margin-top: var(--space-3); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mb-2  { margin-bottom: var(--space-2); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.p-4   { padding: var(--space-4); }
.p-6   { padding: var(--space-6); }
.px-4  { padding-inline: var(--space-4); }
.py-4  { padding-block: var(--space-4); }

/* ============================================================
   SCREEN TRANSITIONS
   The router adds/removes these classes when navigating.
   Forward: new screen slides in from right.
   Back: current screen slides out to right.
   ============================================================ */
.screen-enter {
  animation: screenSlideIn var(--transition-base) ease forwards;
}
.screen-exit {
  animation: screenSlideOut var(--transition-base) ease forwards;
}

@keyframes screenSlideIn {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes screenSlideOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(16px); }
}

/* ============================================================
   SHARED ANIMATIONS
   ============================================================ */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes slideDown {
  from { transform: translateY(0); }
  to   { transform: translateY(100%); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

/* ============================================================
   SCROLLBAR (desktop)
   ============================================================ */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-disabled);
}

/* ============================================================
   FOCUS VISIBLE
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ============================================================
   SELECTION
   ============================================================ */
::selection {
  background: var(--primary-light);
  color: var(--primary);
}
[data-theme="dark"] ::selection {
  background: var(--primary-light);
  color: var(--primary);
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   Mobile first — all base styles target mobile.
   Scale up using min-width media queries.
   
   Breakpoints:
   sm:  480px  — larger small phones
   md:  768px  — tablets
   lg:  1025px — desktop
   xl:  1280px — wide desktop
   ============================================================ */

/* Small phones (320–479px) — handled by base styles above */

/* Larger phones & up */
@media (min-width: 480px) {
  .container {
    padding-inline: var(--space-6);
  }
}

/* Tablets & up */
@media (min-width: 768px) {
  :root {
    --navbar-height: 72px;
    --header-height: 60px;
  }
  .container {
    padding-inline: var(--space-8);
  }
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .md\:grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Desktop & up */
@media (min-width: 1025px) {
  :root {
    --header-height: 64px;
  }
  .container {
    padding-inline: var(--space-10);
  }
  .lg\:grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}