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

@font-face {
  font-family: 'GT Maru Emoji';
  src: url('/public/fonts/GT-Maru-Emoji-Color.woff2') format('woff2');
  font-display: swap;
  /* unicode-range limits the font to the glyphs GT Maru Emoji actually provides,
     so the browser falls back to the platform emoji font for everything else. */
  unicode-range:
    U+203C, U+2049, U+2318, U+231B, U+2325-2328, U+232B, U+23CE-23CF, U+23E9-23EF,
    U+23F3, U+23F8-23FA, U+24C2, U+2600-2603, U+2605-2606, U+260E, U+2610-2612,
    U+2615, U+261C-2620, U+2639-263A, U+263C, U+2668, U+2699, U+26A0-26A1,
    U+26BD-26BE, U+26D4, U+2702, U+2704-2705, U+2709-270C, U+270E-2718, U+2728,
    U+274C, U+274E, U+2753-2755, U+2757, U+2763-2764, U+2795-2797, U+2B50,
    U+2B55, U+3020, U+3036, U+1F170-1F171, U+1F17E-1F17F, U+1F18E, U+1F191-1F19A,
    U+1F300, U+1F308, U+1F310, U+1F31E-1F31F, U+1F338, U+1F33C, U+1F340,
    U+1F344-1F345, U+1F347, U+1F349, U+1F34B-1F34C, U+1F34E-1F350, U+1F352-1F355,
    U+1F366, U+1F369, U+1F36D, U+1F377-1F378, U+1F37A-1F37B, U+1F380-1F381,
    U+1F388-1F389, U+1F38C, U+1F396, U+1F3AF, U+1F3B1, U+1F3B5-1F3B6, U+1F3BE,
    U+1F3C0, U+1F3C5-1F3C6, U+1F40C, U+1F414, U+1F419, U+1F41B, U+1F42D,
    U+1F42F-1F431, U+1F435-1F439, U+1F43B-1F43C, U+1F440-1F441, U+1F446-1F450,
    U+1F453, U+1F479-1F47B, U+1F47D-1F480, U+1F48C, U+1F493-1F49E, U+1F4A1,
    U+1F4A4-1F4AD, U+1F4AF-1F4B0, U+1F4B2-1F4B7, U+1F4BB, U+1F4BE, U+1F4C1-1F4C2,
    U+1F4C4, U+1F4CC-1F4CE, U+1F4D2, U+1F4E4-1F4E9, U+1F4F6, U+1F500-1F50A,
    U+1F50D-1F50E, U+1F512-1F513, U+1F517-1F51E, U+1F520-1F525, U+1F534-1F53B,
    U+1F550-1F567, U+1F573, U+1F576, U+1F590, U+1F595-1F596, U+1F5A4-1F5A5,
    U+1F5D2, U+1F5E8, U+1F5EF, U+1F5FB, U+1F600-1F645, U+1F648-1F64D, U+1F64F,
    U+1F6A5-1F6A6, U+1F6AB, U+1F6BE, U+1F6D2, U+1F7E0-1F7EB, U+1F90C-1F915,
    U+1F917-1F92F, U+1F932, U+1F937, U+1F942-1F943, U+1F947-1F949, U+1F951,
    U+1F95A, U+1F95D, U+1F970-1F978, U+1F97A, U+1F98A, U+1F9D0, U+1F9E1,
    U+1F9F2, U+1FA78;
}

/* PP Eiko — Display font (headings, page titles, section labels) */
@font-face {
  font-family: 'PP Eiko';
  src: url('/public/fonts/PPEiko-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

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

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

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

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

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

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

  /* === BACKGROUND === */
  --bg: var(--cream);
  --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 === */
  --text: #3d3028;
  --text-secondary: #7a6b5e;
  --text-muted: #a89888;

  /* === ACCENT COLORS === */
  --accent: var(--amber);
  --accent-warm: var(--coral);
  --accent-secondary: var(--pink);
  --accent-hover: #d4944a;
  --accent-glow: #f5c890;
  --accent-green: var(--sage);
  --accent-pink: var(--pink);
  --accent-blue: var(--sky);

  /* === SHADOWS (3 levels + legacy aliases) === */
  --shadow-sm: 0 1px 3px rgba(180, 150, 120, 0.06);
  --shadow-md: 0 4px 16px rgba(180, 150, 120, 0.07);
  --shadow-lg: 0 12px 40px rgba(180, 150, 120, 0.1);
  --shadow: var(--shadow-md);
  --shadow-hover: var(--shadow-lg);
  --shadow-glow: 0 4px 24px rgba(232, 165, 90, 0.2);

  /* === SEMANTIC COLORS === */
  --color-danger: #c54545;
  --color-danger-bg: rgba(220, 100, 100, 0.08);
  --color-success: #6ab88f;
  --color-success-bg: rgba(125, 201, 160, 0.08);

  /* === RADIUS === */
  --radius-sm: 8px;
  --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);
  --ease-spring: cubic-bezier(0.23, 1, 0.32, 1);
  --duration: 250ms;
  --duration-fast: 150ms;
  --duration-slow: 400ms;

  /* === INTERACTIVE STATES === */
  --hover-lift: -3px;

  /* =============================================================
     COMPONENT VARIABLES
     ============================================================= */

  /* === HEADER === */
  --header-bg: rgba(250, 245, 239, 0.72);
  --header-blur: 28px;

  /* === CARDS / POSTS ===
     Chain through --surface / --surface-border so palette vibes
     (ember, midnight, aurora) propagate to post cards. */
  --card-bg: var(--surface);
  --card-border: var(--surface-border);
  --card-border-width: 1px;
  --card-radius: 24px;
  --card-radius-sm: 20px;
  --card-shadow: var(--shadow);

  /* === GLASS MORPHISM === */
  --glass-bg: linear-gradient(168deg,
    rgba(255, 255, 255, 0.76),
    rgba(255, 252, 248, 0.58) 50%,
    rgba(250, 245, 240, 0.48));
  --glass-blur: blur(20px) saturate(1.2);
  --glass-border: 1px solid rgba(255, 255, 255, 0.5);
  --glass-shadow: 0 4px 20px rgba(180, 150, 120, 0.05);
  --glass-shadow-inset: 0 1px 0 rgba(255, 255, 255, 0.7) inset;

  /* === SHIMMER BORDER (post card hover) === */
  --shimmer-gradient: linear-gradient(135deg,
    color-mix(in srgb, var(--amber) 35%, transparent),
    color-mix(in srgb, var(--coral) 25%, transparent),
    color-mix(in srgb, var(--pink) 25%, transparent),
    color-mix(in srgb, var(--lavender) 25%, transparent),
    color-mix(in srgb, var(--sky) 35%, transparent),
    color-mix(in srgb, var(--sage) 25%, transparent),
    color-mix(in srgb, var(--amber) 35%, transparent));
  --shimmer-speed: 5s;

  /* === BUTTONS === */
  --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;

  /* Button variants */
  --btn-secondary-bg: var(--surface);
  --btn-secondary-border: var(--surface-border);
  --btn-secondary-text: var(--text);
  --btn-ghost-text: var(--text-secondary);

  /* === 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);
  --avatar-size: 80px;

  /* === PROFILE CUSTOMIZATION === */
  --profile-layout: column;
  --profile-width: 700px;
  --profile-columns: 3;
  --profile-gap: 16px;
  --banner-display: block;
  --banner-height: 220px;
  --header-align: center;
  --header-position: static;
  --profile-header-bg: transparent;
  --profile-header-padding: var(--space-2xl) var(--space-xl);
  --profile-header-blur: 0px;
  --card-border-style: solid;
  --timestamp-display: block;
  --tags-display: flex;
  --reactions-size: normal;
  --font-scale: 100%;

  /* === LINKS === */
  --link-color: var(--accent-warm);
  --link-hover: var(--accent);
  --link-underline: var(--accent-pink);

  /* === 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
     ============================================================= */

  --gradient-garden: linear-gradient(
    170deg,
    #faf5ef 0%,
    #f8f0e8 25%,
    #f5ebe0 50%,
    #f0e4d8 75%,
    #ede0d0 100%
  );

  --gradient-cream: linear-gradient(
    175deg,
    #fffdfb 0%,
    #fdf9f4 40%,
    #faf5ed 70%,
    #f5efe6 100%
  );

  --gradient-sunset: linear-gradient(
    135deg,
    #fdf6ee 0%,
    #fceee0 50%,
    #f8e4d4 100%
  );

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

  /* =============================================================
     PROFILE AMBIENT
     Profile pages paint --bg directly. No overlay blobs, no
     particles — vibes (flat colors or gradients) carry the page.
     ============================================================= */
  --profile-ambient-bg-attachment: fixed;

  /* =============================================================
     TYPOGRAPHY
     ============================================================= */

  /* GT Maru Emoji MUST be first. The @font-face uses unicode-range to scope it
     to emoji codepoints only, so letters fall straight through to PP Museum.
     But putting it later in the stack lets the browser's implicit emoji-font
     fallback (Apple Color Emoji on macOS, Segoe UI Emoji on Windows) win
     before GT Maru is reached. First in the stack is the only working order. */
  --font-body: 'GT Maru Emoji', 'PP Museum', system-ui, sans-serif;
  --font-display: 'GT Maru Emoji', 'PP Eiko', Georgia, serif;
  --font-accent: 'GT Maru Emoji', 'PP Eiko', Georgia, serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --font-emoji: 'GT Maru Emoji', system-ui, sans-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-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: min(680px, 90vw);
  --sidebar-width: 240px;

  /* =============================================================
     SEMANTIC COLOR PALETTE
     ============================================================= */

  --cream: #faf5ef;
  --coral: #e8734a;
  --coral-soft: #f09070;
  --amber: #eda63a;
  --amber-light: #f5c96a;
  --sage: #8aad6e;
  --sage-light: #b5d4a0;
  --pink: #e8a0b4;
  --pink-soft: #f0c4d4;
  --lavender: #c8b8e0;
  --lavender-light: #e8dff5;
  --sky: #b8d8e8;
  --sky-light: #daeef5;
  --brown-light: #d4bb96;

  /* Subtle tints for backgrounds */
  --tint-warm: color-mix(in srgb, var(--amber) 6%, transparent);
  --tint-pink: color-mix(in srgb, var(--pink) 8%, transparent);
  --tint-green: color-mix(in srgb, var(--sage) 6%, transparent);
  --tint-coral: color-mix(in srgb, var(--coral) 6%, transparent);
}

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

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: var(--focus-offset, 2px);
  box-shadow: var(--focus-ring);
}

:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.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;
  }
}