/* ABOUTME: Design tokens for Pollen - comprehensive CSS customization system */
/* ABOUTME: Users can override any variable in their profile's customCss field */

@import url('https://unpkg.com/open-props');

/* PP Museum - humanist slab serif with editorial character */
@font-face {
  font-family: 'PP Museum';
  src: url('/public/fonts/PPMuseum-Thin.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Museum';
  src: url('/public/fonts/PPMuseum-ThinItalic.woff2') format('woff2');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'PP Museum';
  src: url('/public/fonts/PPMuseum-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Museum';
  src: url('/public/fonts/PPMuseum-LightItalic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'PP Museum';
  src: url('/public/fonts/PPMuseum-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Museum';
  src: url('/public/fonts/PPMuseum-RegularItalic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'PP Museum';
  src: url('/public/fonts/PPMuseum-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Museum';
  src: url('/public/fonts/PPMuseum-MediumItalic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'PP Museum';
  src: url('/public/fonts/PPMuseum-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Museum';
  src: url('/public/fonts/PPMuseum-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'PP Museum';
  src: url('/public/fonts/PPMuseum-Ultrabold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Museum';
  src: url('/public/fonts/PPMuseum-UltraboldItalic.woff2') format('woff2');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* =============================================================
     USER-CUSTOMIZABLE VARIABLES
     Override these in your profile's Custom CSS for full control
     ============================================================= */

  /* === BACKGROUND - Warm cream garden palette === */
  --bg: var(--gradient-garden);
  --bg-attachment: fixed;

  /* === SURFACES (cards, modals, overlays) === */
  --surface: rgba(255, 253, 250, 0.88);
  --surface-hover: rgba(255, 255, 255, 0.95);
  --surface-border: rgba(232, 166, 90, 0.15);
  --surface-blur: 16px;

  /* === TEXT HIERARCHY - Warm, readable === */
  /* Contrast ratios against cream (#fdf9f4): */
  /* --text: 10.5:1 (AAA) */
  /* --text-secondary: 5.4:1 (AA) */
  /* --text-muted: 4.5:1 (AA) - darkened for accessibility */
  --text: #3d3530;
  --text-secondary: #6b5f54;
  --text-muted: #7a6e63;

  /* === ACCENT COLORS - Golden orange and soft pink from logo === */
  --accent: #e8a55a;
  --accent-warm: #e85d3b;
  --accent-secondary: #f0a0b0;
  --accent-hover: #d4944a;
  --accent-glow: #f5c890;
  --accent-green: #8cb874;
  --accent-pink: #f5b8c4;

  /* === SHADOWS - Soft, warm === */
  --shadow: 0 4px 24px rgba(139, 100, 60, 0.06);
  --shadow-hover: 0 8px 40px rgba(139, 100, 60, 0.1);
  --shadow-glow: 0 4px 32px rgba(232, 165, 90, 0.25);

  /* === RADIUS - Soft, friendly curves === */
  --radius: 12px;
  --radius-lg: 20px;
  --radius-round: 9999px;

  /* === ANIMATIONS === */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration: 250ms;
  --duration-fast: 150ms;
  --duration-slow: 400ms;

  /* === INTERACTIVE STATES === */
  --hover-lift: -2px;
  --hover-scale: 1.02;

  /* =============================================================
     COMPONENT VARIABLES
     Fine-grained control over specific UI elements
     ============================================================= */

  /* === HEADER === */
  --header-bg: rgba(255, 253, 248, 0.92);
  --header-blur: 16px;
  --header-height: 4.5rem;

  /* === CARDS / POSTS === */
  --card-bg: var(--surface);
  --card-border: var(--surface-border);
  --card-border-width: 1px;
  --card-radius: var(--radius-lg);
  --card-shadow: var(--shadow);
  --card-padding: 1.5rem;

  /* === BUTTONS - Soft, friendly === */
  --btn-bg: var(--accent);
  --btn-bg-hover: var(--accent-hover);
  --btn-text: white;
  --btn-radius: var(--radius-round);
  --btn-shadow: 0 2px 8px rgba(232, 165, 90, 0.25);
  --btn-padding: 0.75rem 1.75rem;

  /* === INPUTS === */
  --input-bg: rgba(255, 253, 250, 0.7);
  --input-bg-focus: rgba(255, 255, 255, 0.95);
  --input-border: rgba(232, 165, 90, 0.2);
  --input-border-focus: var(--accent);
  --input-radius: var(--radius);
  --input-padding: 0.875rem 1.25rem;

  /* === AVATAR === */
  --avatar-bg: linear-gradient(135deg, var(--accent), var(--accent-pink));
  --avatar-shadow: 0 4px 16px rgba(232, 165, 90, 0.2);

  /* === LINKS === */
  /* Link colors rely on underline for non-color identification (WCAG 1.4.1) */
  --link-color: var(--accent-warm);
  --link-hover: var(--accent);
  --link-underline: var(--accent-pink);

  /* === LOGO - Warm gradient like the pollen.place script === */
  --logo-color: var(--accent);
  --logo-decoration: '🌸';
  --logo-decoration-opacity: 1;
  --logo-spin-duration: 10s;

  /* === MODAL === */
  --modal-overlay: rgba(61, 53, 48, 0.4);
  --modal-blur: 12px;

  /* === FOCUS STATES === */
  --focus-ring: 0 0 0 3px rgba(232, 165, 90, 0.35);
  --focus-offset: 2px;

  /* =============================================================
     GRADIENTS (building blocks for --bg and other uses)
     ============================================================= */

  /* Garden gradient - warm cream with subtle blush, like morning light */
  --gradient-garden: linear-gradient(
    170deg,
    #fdf9f4 0%,
    #faf5ed 25%,
    #f8efe4 50%,
    #f5e8da 75%,
    #f0e0d0 100%
  );

  /* Softer alternative - almost white with warmth */
  --gradient-cream: linear-gradient(
    175deg,
    #fffdfb 0%,
    #fdf9f4 40%,
    #faf5ed 70%,
    #f5efe6 100%
  );

  /* Sunset warmth - for special moments */
  --gradient-sunset: linear-gradient(
    135deg,
    #fdf6ee 0%,
    #fceee0 50%,
    #f8e4d4 100%
  );

  --gradient-accent: linear-gradient(135deg, var(--accent), var(--accent-pink));

  /* =============================================================
     TYPOGRAPHY - PP Museum editorial system
     ============================================================= */

  --font-display: 'PP Museum', Georgia, serif;
  --font-body: 'PP Museum', Georgia, serif;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 3rem;
  --font-size-5xl: 4rem;

  --font-weight-thin: 100;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-ultrabold: 800;

  --line-height: 1.6;
  --line-height-tight: 1.1;
  --line-height-loose: 1.8;

  --letter-spacing: 0.01em;
  --letter-spacing-wide: 0.04em;
  --letter-spacing-tight: -0.02em;

  /* =============================================================
     SPACING
     ============================================================= */

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 2.5rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* =============================================================
     LAYOUT
     ============================================================= */

  --content-width: 680px;
  --sidebar-width: 280px;

  /* =============================================================
     SEMANTIC COLOR ALIASES
     ============================================================= */

  --cream: #fdf9f4;
  --blush: #f8e4d8;
  --petal: #f5b8c4;
  --honey: #e8a55a;
  --coral: #e85d3b;
  --sage: #8cb874;
  --sky: #a8d4e6;

  /* Subtle tints for backgrounds */
  --tint-warm: rgba(232, 165, 90, 0.06);
  --tint-pink: rgba(245, 184, 196, 0.08);
  --tint-green: rgba(140, 184, 116, 0.06);
}

/* =============================================================
   GLOBAL ACCESSIBILITY STYLES
   ============================================================= */

/* Focus styles for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: var(--focus-offset, 2px);
  box-shadow: var(--focus-ring);
}

/* Remove default focus for mouse users */
:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* Skip link for keyboard users */
.skip-link {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  color: var(--text);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius);
  z-index: 9999;
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  box-shadow: var(--shadow);
  transition: top var(--duration-fast) var(--ease);
}

.skip-link:focus {
  top: var(--space-md);
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}