/* =============================================================================
   BASE.CSS - Typography Workbench
   "Specimen House" - An Editorial Gallery for Typography
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Font Imports - Distinctive, Characterful Choices
   ----------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=JetBrains+Mono:wght@400;500&display=swap');

/* -----------------------------------------------------------------------------
   CSS Reset (Modern)
   ----------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1;
}

body {
  line-height: 1.5;
  min-height: 100vh;
}

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

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* -----------------------------------------------------------------------------
   CSS Custom Properties
   ----------------------------------------------------------------------------- */
:root {
  /* =================================
     THE PREVIEW FONT - Core Variable
     ================================= */
  --preview-font: 'Inter', system-ui, -apple-system, sans-serif;
  --preview-font-mono: 'JetBrains Mono', 'SF Mono', 'Monaco', monospace;

  /* =================================
     UI Fonts - Clean Sans-Serif for Legibility
     ================================= */
  --ui-font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --ui-font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --ui-font: 'Inter', system-ui, -apple-system, sans-serif;

  /* =================================
     Color Palette - OKLCH-based, theme-switchable
     These are fallback values; themeManager.js overrides them
     ================================= */

  /* Backgrounds - Deep warm blacks (terracotta dark default) */
  --bg-app: oklch(0.13 0.01 60);
  --bg-sidebar: oklch(0.15 0.01 60);
  --bg-canvas: oklch(0.14 0.01 60);
  --bg-card: oklch(0.18 0.01 60);
  --bg-card-hover: oklch(0.22 0.01 60);
  --bg-elevated: oklch(0.24 0.01 60);
  --bg-input: oklch(0.16 0.01 60);

  /* Borders - Subtle warmth */
  --border-subtle: oklch(1 0 0 / 0.04);
  --border-default: oklch(1 0 0 / 0.08);
  --border-strong: oklch(1 0 0 / 0.12);
  --border-focus: oklch(0.7 0.18 35);

  /* Text - Warm cream tones */
  --text-primary: oklch(0.95 0.01 60);
  --text-secondary: oklch(0.7 0.02 60);
  --text-tertiary: oklch(0.5 0.02 60);
  --text-inverse: oklch(0.13 0.01 60);

  /* Accent - Terracotta/Coral signature */
  --accent-primary: oklch(0.7 0.18 35);
  --accent-primary-hover: oklch(0.65 0.2 35);
  --accent-primary-subtle: oklch(0.7 0.18 35 / 0.1);
  --accent-primary-glow: oklch(0.7 0.18 35 / 0.2);

  /* Supporting accents */
  --accent-sage: oklch(0.6 0.1 145);
  --accent-gold: oklch(0.7 0.15 85);
  --accent-violet: oklch(0.65 0.12 295);
  --accent-rose: oklch(0.72 0.1 10);

  /* Semantic */
  --accent-success: oklch(0.6 0.1 145);
  --accent-warning: oklch(0.7 0.15 85);
  --accent-error: oklch(0.6 0.15 25);

  /* =================================
     Typography Scale - Refined
     ================================= */
  --text-xs: 0.6875rem;    /* 11px */
  --text-sm: 0.8125rem;    /* 13px */
  --text-base: 0.9375rem;  /* 15px */
  --text-lg: 1.0625rem;    /* 17px */
  --text-xl: 1.1875rem;    /* 19px */
  --text-2xl: 1.5rem;      /* 24px */
  --text-3xl: 1.875rem;    /* 30px */
  --text-4xl: 2.375rem;    /* 38px */
  --text-5xl: 3rem;        /* 48px */
  --text-6xl: 3.75rem;     /* 60px */
  --text-7xl: 4.75rem;     /* 76px */
  --text-8xl: 6rem;        /* 96px */
  --text-9xl: 8rem;        /* 128px */

  /* =================================
     Spacing Scale
     ================================= */
  --space-0: 0;
  --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 */
  --space-20: 5rem;        /* 80px */
  --space-24: 6rem;        /* 96px */
  --space-32: 8rem;        /* 128px */

  /* =================================
     Layout
     ================================= */
  --sidebar-width: 300px;
  --sidebar-collapsed: 60px;
  --header-height: 64px;
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 20px;
  --border-radius-full: 9999px;

  /* =================================
     Shadows - Layered depth (uses --shadow-color set by themeManager)
     ================================= */
  --shadow-color: oklch(0 0 0 / 0.5);
  --shadow-sm: 0 1px 2px var(--shadow-color);
  --shadow-md: 0 4px 12px var(--shadow-color);
  --shadow-lg: 0 12px 32px var(--shadow-color);
  --shadow-xl: 0 24px 48px var(--shadow-color);
  --shadow-glow: 0 0 40px var(--accent-primary-glow);
  --shadow-inner: inset 0 1px 2px var(--shadow-color);

  /* =================================
     Transitions - Smooth & Refined
     ================================= */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);

  --transition-fast: 0.15s var(--ease-out-expo);
  --transition-base: 0.25s var(--ease-out-expo);
  --transition-slow: 0.4s var(--ease-out-expo);
  --transition-slower: 0.6s var(--ease-out-quint);
  --transition-font: 0.2s var(--ease-out-expo);

  /* =================================
     Effects
     ================================= */
  --noise-opacity: 0.015;
  --grain-size: 180px;
}

/* -----------------------------------------------------------------------------
   Base Body Styles
   ----------------------------------------------------------------------------- */
body {
  font-family: var(--ui-font);
  font-size: var(--text-base);
  color: var(--text-primary);
  background-color: var(--bg-app);
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  background-size: var(--grain-size);
  background-blend-mode: overlay;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(224, 122, 95, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse 60% 80% at 80% 100%, rgba(129, 178, 154, 0.03) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* -----------------------------------------------------------------------------
   Typography Utilities for Previews
   ----------------------------------------------------------------------------- */

/* Apply preview font to these elements */
.preview-text {
  font-family: var(--preview-font);
  transition: font-family var(--transition-font);
}

.preview-mono {
  font-family: var(--preview-font-mono);
  transition: font-family var(--transition-font);
}

/* Weight utilities */
.weight-100 { font-weight: 100; }
.weight-200 { font-weight: 200; }
.weight-300 { font-weight: 300; }
.weight-400 { font-weight: 400; }
.weight-500 { font-weight: 500; }
.weight-600 { font-weight: 600; }
.weight-700 { font-weight: 700; }
.weight-800 { font-weight: 800; }
.weight-900 { font-weight: 900; }

/* Style utilities */
.italic { font-style: italic; }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.tracking-tight { letter-spacing: -0.025em; }
.tracking-normal { letter-spacing: 0; }
.tracking-wide { letter-spacing: 0.025em; }
.tracking-wider { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.1em; }

/* Line height utilities */
.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }
.leading-snug { line-height: 1.375; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.625; }
.leading-loose { line-height: 2; }

/* -----------------------------------------------------------------------------
   Selection Styles
   ----------------------------------------------------------------------------- */
::selection {
  background-color: var(--accent-primary);
  color: white;
}

/* -----------------------------------------------------------------------------
   Scrollbar Styling - Minimal & Refined
   ----------------------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

/* -----------------------------------------------------------------------------
   Focus Styles - Elegant
   ----------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 3px;
}

/* -----------------------------------------------------------------------------
   Link Styles
   ----------------------------------------------------------------------------- */
a {
  color: var(--accent-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--accent-primary-hover);
}

/* -----------------------------------------------------------------------------
   Button Reset
   ----------------------------------------------------------------------------- */
button {
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

/* -----------------------------------------------------------------------------
   Utility Classes
   ----------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

/* -----------------------------------------------------------------------------
   Animation Utilities
   ----------------------------------------------------------------------------- */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

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

/* Stagger animation delays */
.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.1s; }
.stagger-3 { animation-delay: 0.15s; }
.stagger-4 { animation-delay: 0.2s; }
.stagger-5 { animation-delay: 0.25s; }
.stagger-6 { animation-delay: 0.3s; }
.stagger-7 { animation-delay: 0.35s; }
.stagger-8 { animation-delay: 0.4s; }