/* ========================================
   DESIGN TOKENS
   Extracted from style.css in Session 168-C
   Source lines: 1-327
======================================== */
/* ========================================
   CSS CUSTOM PROPERTIES - DESIGN SYSTEM
   Based on Pexels/Vimeo UI Style Guide
   ======================================== */
:root {
  /* === BRAND COLORS === */
  --accent-color: var(--gray-800);            /* Dark gray (accent removed) */
  --accent-color-hover: var(--gray-900);      /* Darker gray on hover */
  --accent-color-light: rgba(38, 38, 38, 0.1); /* Gray background tint */

  /* === ACCENT COLORS (Brand Green) === */
  /* Primary brand accent - bright green for visual elements (backgrounds, borders, icons on dark backgrounds) */
  --accent-color-primary: rgb(73, 242, 100);  /* Bright green - high visibility, excellent contrast on dark backgrounds */

  /* Secondary brand accent - darker green for text/icons with better contrast on light backgrounds */
  --accent-color-for-text-icons: #16ba31;     /* Vivid green — DECORATIVE/non-text use only (backgrounds, borders, outlines). NOT WCAG AA for body text (~2.56:1 on white); use var(--success) for green text/icons on light. (S205 AA-1) */

  /* === NEUTRAL COLORS === */
  --white: #FFFFFF;
  --main-bg: #f9f8f6;     /* DEF-190-I: the .main-bg page background (warm off-white); single source of truth, consumed by .main-bg + the sticky date heading */
  --gray-50: #FAFAFA;     /* Page backgrounds */
  --gray-100: #F5F5F5;    /* Card backgrounds */
  --gray-115: #F0F0F0;    /* DEF-190-K: .prompt-group canvas (between gray-100 #F5F5F5 and gray-200 #EBEBEB) */
  --gray-200: #EBEBEB;    /* Borders, dividers */
  --gray-225: #E5E5E5;    /* DEF-190-K: .placeholder-empty fill (between gray-200 #EBEBEB and gray-300 #D4D4D4) */
  --gray-300: #D4D4D4;    /* Disabled states */
  --gray-400: #A3A3A3;    /* Secondary text */
  --gray-500: #737373;    /* Body text (less important) */
  --gray-600: #525252;    /* Secondary headings */
  --gray-700: #404040;    /* Primary body text */
  --gray-800: #262626;    /* Headings */
  --gray-900: #171717;    /* High contrast text */
  --black: #000000;       /* Logo, critical emphasis */

  /* === UI SPECIFIC COLORS === */
  --text-primary: #191919;      /* Main text color globally */
  --text-dark: #212529;          /* Dark text color */
  --text-muted: #6c757d;         /* Muted text color */
  --icon-secondary: #a8a8a8;    /* Dropdown icons */
  --arrow-color: #767676;       /* Dropdown arrows - WCAG 2.1 AA compliant (4.5:1 contrast) */

  /* === ACTION COLORS === */
  --link-color: #191919;                     /* Dark near-black for links (Phase J.2) */
  --link-color-hover: #000000;               /* Black for hover */
  --notification-red: #ef4444;               /* Notification badge red */
  --color-liked: #ff3a78;                    /* Liked heart pink/red */
  --hover-bg-light: rgba(0, 0, 0, 0.05);    /* Light hover background */

  /* === SPACING SYSTEM (8px base) === */
  --space-1: 4px;    /* 0.5x */
  --space-2: 8px;    /* 1x */
  --space-3: 12px;   /* 1.5x */
  --space-4: 16px;   /* 2x */
  --space-5: 20px;   /* 2.5x */
  --space-6: 24px;   /* 3x */
  --space-8: 32px;   /* 4x */
  --space-10: 40px;  /* 5x */
  --space-12: 48px;  /* 6x */
  --space-16: 64px;  /* 8x */

  /* === TYPOGRAPHY === */
  --font-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
               'Oxygen', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif;
  --font-logo: 'Pattaya', 'Roboto', system-ui, sans-serif;

  /* === SHADOWS === */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-dropdown: 0 10px 40px rgba(0, 0, 0, 0.15);
  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);  /* CC_SPEC_FOLLOW_CARD_LAYOUT: shared card box-shadow (cross-card sweep deferred) */
  --shadow-card-soft: 0 1px 2px rgba(23, 23, 23, 0.04), 0 4px 12px rgba(23, 23, 23, 0.05);  /* FD1-1C-C: two-layer soft card shadow (S209 dashboard mockup); Data-surface single separation device */
  --focus-ring: 0 0 0 3px rgba(38, 38, 38, 0.12);  /* Input focus ring (neutral, replaces legacy blue — DEF-184-1) */

  /* === BORDER RADIUS === */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 15px;  /* Tabs, badges, pill-shaped elements */
  --radius-full: 9999px;

  /* === MEDIA CONTAINER === */
  --media-container-padding: 30px;

  /* === TRANSITIONS & TIMING === */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
  --delay-dropdown: 300ms;                   /* Hover delay before hiding dropdown */
  --duration-animation: 200ms;               /* Standard animation duration */
  --duration-slide: 0.3s;                    /* Slide animation duration */

  /* === Z-INDEX SYSTEM === */
  --z-sticky: 900;                           /* DEF-190-I: sticky content headings — below --z-nav so they tuck under the navbar, above page content */
  --z-nav: 1000;                             /* Navbar z-index */
  --z-dropdown: 2000;                        /* Dropdown z-index */
  --z-modal: 3000;                           /* Modal z-index (future use) */
  --z-skip-link: 9999;                       /* Skip to main content link */

  /* === COLLECTIONS MODAL === */
  --collection-icon-size: 3.2em;             /* Large icons (create card, empty state) */
  --collection-icon-size-sm: 1.5em;            /* Overlay icons (check, minus) */
  --collection-modal-padding: 2em;           /* Modal body padding */
  --collection-card-gap: 1rem;               /* Grid gap between cards */
  --collection-overlay-saved: rgba(22, 163, 74, 0.75);   /* Green - saved state */
  --collection-overlay-remove: rgba(239, 68, 68, 0.75);  /* Red - hover to remove */
  --collection-overlay-add: rgba(0, 0, 0, 0.6);          /* Dark - hover to add */
  --collection-thumb-gap: 4px;                          /* Gap between thumbnail images */

  /* === LAYOUT DIMENSIONS === */
  --navbar-height: 70px;                     /* Desktop navbar height */
  --navbar-height-mobile: 64px;              /* Mobile navbar height */
  --container-max-width: 1280px;             /* Max container width */
  --input-height: 48px;                      /* Standard input height */
  --icon-btn-size: 40px;                     /* Icon button size */
  --logo-spacing: 25px;                      /* Logo right margin */

  /* === TYPOGRAPHY SIZES === */
  --font-size-logo: 28px;                    /* Logo font size (desktop) */
  --font-size-logo-mobile: 24px;             /* Logo font size (mobile) */
  --font-size-nav: 17px;                     /* Navigation text size */
  --font-size-base: 15px;                    /* Base text size */
  --font-size-small: 14px;                   /* Small text size */
  --font-size-xs: 13px;                      /* Extra small text size */
  --font-size-icon: 18px;                    /* Standard icon size */
  --font-size-lg: 24px;                      /* Large text/icon size */
  --letter-spacing-logo: -0.5px;             /* Logo letter spacing */

  /* === BUTTON SIZE VARIANTS === */
  --btn-text-sm: 14px;                       /* Small button text */
  --btn-padding-sm: 10px 20px;               /* Small button padding */

  /* === SEMANTIC COLORS (WCAG AA Compliant) === */
  --success: #047857;              /* Green - positive actions (5.48:1 on white — WCAG AA) */
  --success-hover: #065F46;        /* Darker green on hover (7.68:1 on white) */
  --success-light: #D1FAE5;        /* Light green backgrounds */

  --error: #DC2626;                /* Red - errors, destructive (4.83:1 contrast) */
  --error-hover: #B91C1C;          /* Darker red on hover */
  --error-light: #FEE2E2;          /* Light red backgrounds */

  --warning: #F59E0B;              /* Orange - warnings, cautions */
  --warning-light: #FEF3C7;        /* Light orange backgrounds */
  --warning-text: #92400E;         /* FD1-1C-C/AMD-1CC-03: text-safe warning amber (7.09:1 on white — AA & AAA-normal). TEXT and categorical borders only; --warning (#F59E0B, ~2.15:1) is FILLS ONLY, never text. */

  --info: #1d4ed8;                 /* Darker blue - WCAG AA compliant */
  --info-light: #DBEAFE;           /* Light blue backgrounds */

  /* === OPERATIONS DASHBOARD — FD-1 Phase 1-C (Session 210, 1-C-0-DOCS) ===
     PLACEHOLDER PALETTE: real token names, provisional values.
     Claude Design will revisit the VALUES; the NAMES are the contract —
     1-C specs/templates reference these tokens, never raw hex (ADR-033).
     Contrast figures below are from the Session 209 mockup verification
     (recorded at CLAUDE.md DEF-209-DASHBOARD-COLOR-TOKENS). Zero consumers
     until 1-C-B ships. */
  --dash-fill-primary: #436AF6;    /* Periwinkle primary fill / chart series 1. 4.53:1 on white — AA for large text & UI graphics. Developer ruling S209: FILL-AND-GRAPHIC colour, not a text-background pair. */
  --dash-fill-secondary: #6F90F6;  /* Chart series 2 / secondary fill. 3.00:1 on white — FAILS AA AS TEXT. FILLS ONLY, NEVER TEXT (constraint is load-bearing; name encodes it — the --accent-color-for-text-icons / S205 AA-1 lesson). */
  --dash-text-accent: #2743B0;     /* Accent TEXT on light tints. 8.35:1 on white — AAA. The only --dash-* token approved for text. */
  --dash-tint-bg: #EEF2FE;         /* Tint background for dashboard panels/chips. Pair text on it with --dash-text-accent or the neutral text scale. */

  /* === LEGACY SUPPORT (for existing styles) === */
  --main-blue: var(--gray-800);
  --main-blue-hover: var(--gray-900);
  --accent-primary: var(--gray-800);  /* Alias for backward compatibility */

  /* Deprecated - use var(--radius-lg) instead */
  --radius-standard: var(--radius-lg);  /* DEPRECATED: Use --radius-lg */

  /* === LEADERBOARD VARIABLES (Phase G Part C) === */
  --leaderboard-bg: var(--white);
  --leaderboard-row-bg: var(--white);
  --leaderboard-row-hover: var(--gray-50);
  --leaderboard-border: var(--gray-200);
  --leaderboard-rank-color: var(--text-primary);
  --leaderboard-rank-size: 2em;
  --leaderboard-avatar-size: 80px;
  --leaderboard-thumbnail-size: 180px;
  --leaderboard-thumbnail-gap: 8px;
  --leaderboard-row-padding: 16px 24px;

  /* Tab Variables (for leaderboard and similar components) */
  --tab-bg: transparent;
  --tab-bg-active: var(--gray-900);
  --tab-text: var(--gray-500);
  --tab-text-active: var(--white);
  --tab-border-radius: 20px;
  --tab-padding: 8px 16px;

  /* === FILTER BAR COMPONENT (Phase CSS Consolidation) === */
  --bg-light: #f7f7f7;
  --border-light: #c6c6c6;
  --border-lighter: #e5e7eb;
  --tab-active-bg: #1a1a1a;
  --tab-hover-bg: rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   Shared Media Container Component
   Used by: upload page (.upload-preview), prompt detail page
   ========================================================================== */

.media-container-shell {
  background: var(--gray-115);
  padding: var(--media-container-padding, 30px);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.media-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.media-container img,
.media-container video {
  display: block;
  max-width: 100%;
  max-height: 800px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-lg);
}

/* Tablet and below */
@media (max-width: 991.98px) {
  .media-container img,
  .media-container video {
    max-height: 500px;
  }
}

/* Mobile */
@media (max-width: 575.98px) {
  .media-container img,
  .media-container video {
    border-radius: 0;
    max-height: 400px;
  }
}

/* ===== FONT FAMILY DECLARATIONS ===== */
/* Prevent horizontal scrollbar globally (CRITICAL FIX) */
*, *::before, *::after {
  box-sizing: border-box;  /* Ensure padding/borders are included in width */
}

html, body {
  overflow-x: hidden;  /* Prevent horizontal scrollbar */
  max-width: 100vw;    /* Ensure nothing exceeds viewport width */
  margin: 0;
  padding: 0;
}

/* Base font for body and most text */
body {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background-color: white;
  color: var(--text-primary);  /* Global text color #191919 */
}

/* Headings and navigation use Roboto */
h1, h2, h3, h4, h5, h6,
.hero-main-title,
.hero-subtitle,
.form-title,
.sidebar-title,
.nav-link {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* Logo uses Fugaz One consistently */
.logo-text,
.footer-header.logo {
  font-family: var(--font-logo);
  font-weight: 400;
}

/* Buttons use Roboto for consistency */
.btn,
.hero-btn-primary,
.hero-btn-secondary,
.action-btn,
.upload-btn,
.login-btn {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

a {
  text-decoration: none;
  color: var(--text-primary);
}

a:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

/* Main button color */
.btn-primary {
  background-color: var(--gray-800);
  border-color: var(--gray-800);
}

.btn-primary:hover {
  background-color: var(--gray-900);
  border-color: var(--gray-900);
}

/* Dark pill button - reusable pill-shaped dark button */
.btn-dark-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background-color: var(--gray-900);
    color: var(--white);
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s;
}

.btn-dark-pill:hover {
    background-color: var(--gray-700);
    color: var(--white);
    text-decoration: none;
}

main {
  margin-bottom: 100px;
}

.alert-success {
  background-color: var(--gray-100);
}

.main-bg {
  background-color: var(--main-bg);  /* DEF-190-I: tokenized (#f9f8f6) so the sticky date heading bg matches exactly */
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* DEF-211 acceptance test — Session 212, cache-bust verification (harmless comment) */