/*
 * Design System - Base Styles
 *
 * CSS custom properties, base HTML elements, and typography.
 * Based on the design exploration documented in WEEK_VIEW_DESIGN_FINDINGS.md
 */

/* ============================================
   CSS Custom Properties
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Princess+Sofia&family=Caveat:wght@400;700&family=Karla:wght@400;500;600&family=Crimson+Pro:wght@300;400&family=Reenie+Beanie&display=swap');

:root {
  /* Base Colors */
  --paper-bg: #FAF5ED;
  --paper-texture: #F2EBE0;

  /* Parchment */
  --parchment: #B8A08C;
  --parchment-dark: #9A8470;
  --parchment-light: #C4B5A0;

  /* Ink */
  --ink-dark: #3A3A3A;
  --ink-medium: #555;
  --ink-light: #AAA;

  /* Immovable (Blue) */
  --slate-blue: #4A6D8C;
  --dusty-blue: #5A7D9C;
  --charcoal-blue: #3D5A73;

  /* Urgent Tag Family (Yellows/Oranges) */
  --urgent-1: #FFF4D6; --urgent-1-dark: #FFECC0;  /* Butter yellow */
  --urgent-2: #FFF9E0; --urgent-2-dark: #FFF0CC;  /* Vanilla */
  --urgent-3: #FFE8D6; --urgent-3-dark: #FFDCC4;  /* Warm peach */
  --urgent-4: #FFDDD4; --urgent-4-dark: #FFD0C4;  /* Soft coral */
  --urgent-5: #FFE4CC; --urgent-5-dark: #FFD8B8;  /* Light orange */

  /* Upcoming Tag Family (Greens) */
  --upcoming-1: #E0E8DC; --upcoming-1-dark: #D4DFD0;  /* Pale sage */
  --upcoming-2: #D0DDC8; --upcoming-2-dark: #C4D4BC;  /* Light sage */
  --upcoming-3: #C8D4C2; --upcoming-3-dark: #BCC9B6;  /* Sage */
  --upcoming-4: #B8C9B0; --upcoming-4-dark: #ACBEA4;  /* Eucalyptus */
  --upcoming-5: #A8BDA0; --upcoming-5-dark: #9CB294;  /* Muted forest */

  /* Admin Tag Family (Blues) */
  --admin-1: #D9E8F5; --admin-1-dark: #C8DCEC;  /* Sky blue */
  --admin-2: #E3EEF8; --admin-2-dark: #D6E5F3;  /* Powder blue */
  --admin-3: #CDE2F0; --admin-3-dark: #BFDAE8;  /* Soft blue */
  --admin-4: #D0E4F5; --admin-4-dark: #C0D8EC;  /* Periwinkle */

  /* Creative Tag Family (Pinks) */
  --creative-1: #FFD9DE; --creative-1-dark: #FFCCD3;  /* Soft blush */
  --creative-2: #F5E1E5; --creative-2-dark: #F0DED9;  /* Pale rose */
  --creative-3: #FFDDD4; --creative-3-dark: #FFD0C4;  /* Soft coral */
  --creative-4: #F0D9DD; --creative-4-dark: #E8CDD3;  /* Dusty pink */
  --creative-5: #FFE4E8; --creative-5-dark: #FFD8DD;  /* Light pink */

  /* Decorative Accents */
  --dusty-rose: #D4A59A;
  --terra-cotta: #C9A593;
  --warm-tan: #DCC9B8;

  /* Typography */
  --font-logo: 'Princess Sofia', cursive;
  --font-handwritten: 'Caveat', cursive;
  --font-accent: 'Reenie Beanie', cursive;
  --font-body: 'Karla', sans-serif;
  --font-serif: 'Crimson Pro', serif;

  /* Font sizes */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;

  /* Font weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-base: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Layout */
  --border-radius: 4px;
  --border-width: 1px;
  --border-width-strong: 2px;
  --content-max-width: 1600px;
  --content-padding: var(--space-xl);
}

/* ============================================
   Base Styles
   ============================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  min-height: 100vh;
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  color: var(--ink-dark);
  background-color: var(--paper-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  position: relative;
}

/* Paper texture background - fixed to cover entire viewport */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  pointer-events: none;

  /* Paper texture with dotted pattern */
  background-image:
    radial-gradient(circle, rgba(0,0,0,0.08) 1px, transparent 1px),
    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='2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.15'/%3E%3C/svg%3E");
  background-size: 16px 16px, 100% 100%;
  background-position: 0 0, 0 0;
  background-color: var(--paper-bg);
}

/* ============================================
   Typography
   ============================================ */

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  margin-bottom: var(--space-base);
}

h1 {
  font-size: var(--font-size-2xl);
}

h2 {
  font-size: var(--font-size-xl);
}

h3 {
  font-size: var(--font-size-lg);
}

h4, h5, h6 {
  font-size: var(--font-size-base);
}

p {
  margin-bottom: var(--space-base);
  line-height: 1.6;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--ink-dark);
  text-decoration: underline;
}

a:hover {
  opacity: 0.8;
}

strong, b {
  font-weight: var(--font-weight-bold);
}

small {
  font-size: var(--font-size-sm);
  color: var(--ink-medium);
}

.text-muted {
  color: var(--ink-medium);
}

.text-xs {
  font-size: var(--font-size-xs);
}

.text-sm {
  font-size: var(--font-size-sm);
}

.text-lg {
  font-size: var(--font-size-lg);
}