/* ==========================================================================
   Atelier Design System - Foundation
   Variables, reset, and base typography shared across all tools.
   ========================================================================== */

/* ---------- Design Tokens (Theme-Aware) ---------- */
:root {
  /* Background - mapped to new theme variables */
  --bg-primary: var(--color-background);
  --bg-secondary: var(--color-background-secondary);
  --bg-tertiary: var(--color-surface);

  /* Text - mapped to new theme variables */
  --text-primary: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-muted: var(--color-text-muted);
  --text-dim: var(--color-text-muted);
  --text-disabled: var(--color-text-muted);

  /* Accent - mapped to new theme variables */
  --accent-primary: var(--color-primary);
  --accent-hover: var(--color-primary-hover);
  --accent-active: var(--color-primary-hover);
  --accent-ring: rgba(59, 130, 246, 0.1);

  /* Semantic - mapped to new theme variables */
  --success: var(--color-success);
  --success-mid: var(--color-success);
  --success-dark: var(--color-success);
  --error: var(--color-error);
  --error-dark: var(--color-error);
  --warning: var(--color-warning);

  /* Pro / Gold - These stay fixed as they're brand colors */
  --pro-gradient: linear-gradient(135deg, #fbbf24, #f59e0b);
  --pro-text: #0a0a0a;
  --pro-accent: #d97706;
  --pro-glow: rgba(251, 191, 36, 0.3);

  /* Borders - mapped to new theme variables */
  --border-default: var(--color-border);
  --border-focus: var(--color-primary);

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

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 24px;

  /* Transitions */
  --transition-fast: 150ms ease;

  /* Layout */
  --max-width-page: 1200px;
  --max-width-tool: 720px;
  --nav-height: 60px;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ---------- Base ---------- */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: var(--color-background);
  color: var(--color-text-secondary);
  line-height: 1.6;
  min-height: 100vh;
}

/* ---------- Typography ---------- */
h1 {
  font-size: 36px;
  font-weight: 700;
  line-height: 44px;
  color: var(--color-text-primary);
}

h2 {
  font-size: 28px;
  font-weight: 600;
  line-height: 36px;
  color: var(--color-text-secondary);
}

h3 {
  font-size: 22px;
  font-weight: 600;
  line-height: 28px;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

h4 {
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

.subtitle {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--color-text-secondary);
}

/* ---------- Utilities ---------- */
.hidden {
  display: none !important;
}

.container {
  max-width: var(--max-width-page);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* ==========================================================================
   PRO USER UNLOCK STYLES
   When body has .is-pro class, unlock visual indicators
   ========================================================================== */

/* Hide Pro badges for Pro users */
body.is-pro .pro-badge,
body.is-pro .pro-badge-inline,
body.is-pro .pro-badge-small {
    display: none !important;
}

/* Remove locked appearance for Pro users */
body.is-pro .pro-locked {
    opacity: 1 !important;
    cursor: pointer !important;
}

/* Enable disabled Pro elements */
body.is-pro .pro-option:disabled,
body.is-pro .btn-pro-feature:disabled,
body.is-pro [data-pro-feature]:disabled {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Hide Pro CTA bars for Pro users */
body.is-pro .pro-cta-bar,
body.is-pro #proCTA,
body.is-pro .pro-upgrade-banner {
    display: none !important;
}

/* Make Pro feature sections fully visible and clickable */
body.is-pro .pro-feature,
body.is-pro .pro-section,
body.is-pro .pro-features-section {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Remove the ::after overlay on Pro features */
body.is-pro .pro-feature::after {
    display: none !important;
}

/* Block ALL upgrade modals for Pro users - covers 99% of tools */
body.is-pro #upgrade-modal,
body.is-pro #pro-modal,
body.is-pro #upgradeModal,
body.is-pro .upgrade-modal,
body.is-pro [id*="upgrade-modal"],
body.is-pro [class*="upgrade-modal"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Prevent body scroll lock when modal is hidden */
body.is-pro {
    overflow: auto !important;
}

/* Also hide any modal backdrop for Pro users */
body.is-pro .modal-backdrop,
body.is-pro .modal-overlay {
    display: none !important;
}

/* ========================================================================== */
/* Print Styles                                                               */
/* ========================================================================== */

@media print {
    /* Hide non-essential elements */
    header,
    footer,
    nav,
    .nav,
    .header,
    .footer,
    .related-tools,
    .related-tools-section,
    .pro-cta-bar,
    .pro-badge,
    .upgrade-modal,
    .modal-overlay,
    .cta-bar,
    #proCTA,
    .button-secondary,
    .button-primary:not(.print-btn),
    .input-section,
    .upload-zone,
    .tab-group,
    .options-group,
    .bug-report-btn,
    #bug-report-btn,
    #bugReportBtn,
    .bug-modal,
    [data-noprint],
    .noprint {
        display: none !important;
    }

    /* Ensure content is visible and readable */
    body {
        background: white !important;
        color: black !important;
        font-size: 12pt !important;
    }

    .output-section,
    .result-section,
    .results {
        display: block !important;
        background: white !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Avoid page breaks inside important content */
    .result-card,
    .output-content,
    table {
        page-break-inside: avoid;
    }

    /* Show URLs for links */
    a[href]:after {
        content: " (" attr(href) ")";
        font-size: 10pt;
        color: #666;
    }

    /* Don't show URL for internal/anchor links */
    a[href^="#"]:after,
    a[href^="javascript"]:after {
        content: "";
    }
}