/* ==========================================================================
   Teal & Slate Theme — CSS Custom Properties
   ========================================================================== */

:root {
  /* ── Primary ── */
  --color-primary:        #0D7377;
  --color-primary-hover:  #0A5C5F;
  --color-primary-light:  rgba(13, 115, 119, 0.10);
  --color-primary-rgb:    13, 115, 119;

  /* ── Accent ── */
  --color-accent:         #E8614D;
  --color-accent-hover:   #d04e3b;
  --color-accent-light:   rgba(232, 97, 77, 0.10);
  --color-accent-rgb:     232, 97, 77;

  /* ── Backgrounds ── */
  --bg-body:              #F7F8FA;
  --bg-surface:           #FFFFFF;
  --bg-surface-raised:    #FFFFFF;
  --bg-surface-sunken:    #EFF1F5;
  --bg-overlay:           rgba(26, 29, 38, 0.50);

  /* ── Text ── */
  --text-primary:         #1A1D26;
  --text-secondary:       #6B7280;
  --text-tertiary:        #9CA3AF;
  --text-inverse:         #FFFFFF;
  --text-link:            var(--color-primary);
  --text-link-hover:      var(--color-primary-hover);

  /* ── Borders ── */
  --border-color:         #E2E4E9;
  --border-color-strong:  #C9CDD5;
  --border-radius-sm:     4px;
  --border-radius:        8px;
  --border-radius-lg:     12px;
  --border-radius-xl:     16px;
  --border-radius-full:   9999px;

  /* ── Shadows ── */
  --shadow-xs:   0  1px  2px rgba(0,0,0,0.04);
  --shadow-sm:   0  2px  4px rgba(0,0,0,0.06);
  --shadow-md:   0  4px 12px rgba(0,0,0,0.08);
  --shadow-lg:   0  8px 24px rgba(0,0,0,0.10);
  --shadow-xl:   0 16px 48px rgba(0,0,0,0.12);

  /* ── Typography ── */
  --font-family:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, monospace;

  --font-size-xs:   0.75rem;   /* 12px */
  --font-size-sm:   0.8125rem; /* 13px */
  --font-size-base: 0.9375rem; /* 15px */
  --font-size-md:   1rem;      /* 16px */
  --font-size-lg:   1.125rem;  /* 18px */
  --font-size-xl:   1.25rem;   /* 20px */
  --font-size-2xl:  1.5rem;    /* 24px */
  --font-size-3xl:  1.875rem;  /* 30px */
  --font-size-4xl:  2.25rem;   /* 36px */

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:    1.25;
  --line-height-normal:   1.5;
  --line-height-relaxed:  1.75;

  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   0.02em;

  /* ── Spacing ── */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */

  /* ── Z-Index ── */
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-fixed:     300;
  --z-overlay:   400;
  --z-modal:     500;
  --z-popover:   600;
  --z-tooltip:   700;

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* ── Misc ── */
  --header-height:  64px;
  --sidebar-width:  280px;
  --container-max:  1200px;
  --manga-card-ratio: 3 / 4;
}

/* ==========================================================================
   Dark-mode overrides (used by variables only — full dark file is dark.css)
   ========================================================================== */
body.darkmode {
  --bg-body:            #1E2028;
  --bg-surface:         #262830;
  --bg-surface-raised:  #2E3038;
  --bg-surface-sunken:  #1A1C22;
  --bg-overlay:         rgba(0, 0, 0, 0.60);

  --text-primary:       #E4E6EB;
  --text-secondary:     #9CA3AF;
  --text-tertiary:      #6B7280;
  --text-inverse:       #1A1D26;

  --border-color:       #363840;
  --border-color-strong:#4B4E58;

  --shadow-xs:   0  1px  2px rgba(0,0,0,0.20);
  --shadow-sm:   0  2px  4px rgba(0,0,0,0.24);
  --shadow-md:   0  4px 12px rgba(0,0,0,0.28);
  --shadow-lg:   0  8px 24px rgba(0,0,0,0.32);
  --shadow-xl:   0 16px 48px rgba(0,0,0,0.40);
}