/* Source Serif 4 (display + headings) + Inter Tight (body + UI).
   font-display: optional on both — first paint uses system fallback,
   variable fonts pick up on subsequent visits. Eliminates FOUT-induced
   CLS that pushes Lighthouse Performance below 0.95. */

@import '@fontsource-variable/source-serif-4/index.css';
@import '@fontsource-variable/inter-tight/index.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ──────────────────────────────────────────────────────────────────────────
   Resume / CV — single-page editorial document.
   Light-default. Editorial monochrome + slate-700 accent.
   Source Serif 4 + Inter Tight pairing.
   PRINT-FIRST: every visible-on-screen affordance is hidden in @media print
   so the printed PDF is a clean one-page document.
   ────────────────────────────────────────────────────────────────────────── */

@layer base {
  :root {
    color-scheme: light;
    --color-bg:           #FFFFFF;
    --color-surface:      #FFFFFF;
    --color-surface-2:    #F8FAFC;  /* subtle alt for skills aside */
    --color-text:         #111111;
    --color-text-muted:   #4B5563;  /* gray-600 — passes WCAG AA on white */
    --color-text-subtle:  #64748B;  /* slate-500 — for meta lines */
    --color-accent:       #334155;  /* slate-700 — section labels, links */
    --color-accent-deep:  #1E293B;  /* slate-800 — emphasis */
    --color-rule:         #E2E8F0;  /* slate-200 — divider lines */
    --color-link-underline: rgba(51, 65, 85, 0.4);
  }

  html.dark {
    color-scheme: dark;
    --color-bg:           #0F172A;
    --color-surface:      #0F172A;
    --color-surface-2:    #1E293B;
    --color-text:         #F1F5F9;
    --color-text-muted:   #CBD5E1;
    --color-text-subtle:  #94A3B8;
    --color-accent:       #94A3B8;  /* slate-400 — readable on dark slate */
    --color-accent-deep:  #CBD5E1;
    --color-rule:         #1E293B;
    --color-link-underline: rgba(148, 163, 184, 0.4);
  }

  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    background-color: var(--color-bg);
    color: var(--color-text);
  }
  body {
    font-family: 'Inter Tight Variable', 'Inter Tight', ui-sans-serif, system-ui, -apple-system, sans-serif;
    background-color: var(--color-bg);
    color: var(--color-text);
  }
  ::selection {
    background-color: var(--color-accent);
    color: var(--color-bg);
  }
  *:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 0.125rem;
  }
}

@layer components {
  /* Layout */
  .container-cv {
    @apply mx-auto w-full max-w-cv px-5 sm:px-8;
  }

  /* Section label — small caps, slate accent, used as h2 eyebrow */
  .label-section {
    font-family: 'Inter Tight Variable', 'Inter Tight', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--color-accent);
  }
  .label-meta {
    font-size: 0.875rem;
    color: var(--color-text-muted);
  }

  /* Links in resume body — subtle underline, slate accent */
  .link-resume {
    color: var(--color-text);
    text-decoration: underline;
    text-decoration-thickness: 0.05em;
    text-underline-offset: 0.18em;
    text-decoration-color: var(--color-link-underline);
  }
  .link-resume:hover {
    text-decoration-color: var(--color-accent);
    color: var(--color-accent-deep);
  }

  /* Pill / tag — used for skills and project tech tags */
  .tag-cv {
    display: inline-flex;
    align-items: center;
    font-family: 'Inter Tight Variable', sans-serif;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    background-color: var(--color-surface-2);
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    border: 1px solid var(--color-rule);
  }
  html.dark .tag-cv {
    background-color: var(--color-surface-2);
    color: var(--color-text-muted);
  }

  /* Buttons */
  .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: var(--color-accent-deep);
    color: var(--color-bg);
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0.5rem 0.875rem;
    border-radius: 0.375rem;
    border: 1px solid var(--color-accent-deep);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    min-height: 36px;
  }
  .btn-primary:hover {
    background-color: var(--color-accent);
  }
  html.dark .btn-primary {
    background-color: var(--color-text);
    color: var(--color-bg);
    border-color: var(--color-text);
  }
  html.dark .btn-primary:hover {
    background-color: var(--color-text-muted);
  }

  .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 0.375rem;
    border: 1px solid var(--color-rule);
    color: var(--color-text-muted);
    background: transparent;
    cursor: pointer;
    transition: color 0.12s ease, border-color 0.12s ease;
  }
  .btn-icon:hover {
    color: var(--color-text);
    border-color: var(--color-text-muted);
  }

  /* Hairline divider rule */
  .rule {
    border: 0;
    border-top: 1px solid var(--color-rule);
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   PRINT STYLESHEET — the heart of this template.
   - Locked single page: A4 default; Letter via [data-paper="letter"] body.
   - Hides nav, dark-mode toggle, paper-size toggle, footer, donate button.
   - Forces white background + black text regardless of dark mode.
   - Compresses spacing so the resume fits on one page with normal content.
   - Verified in Chrome 120+, Firefox 122+, Safari 17+.
   ────────────────────────────────────────────────────────────────────────── */

@page {
  size: A4;
  margin: 12mm 14mm;
}

[data-paper='letter'] {
  /* The @page declaration is global; the body attribute toggles size in browsers
     that read the body inline-CSS hint via print-render. Most browsers honor
     @page directly, so the operator can also change the @page rule above. */
}

@media print {
  :root, html.dark {
    color-scheme: light;
    --color-bg:         #FFFFFF !important;
    --color-surface:    #FFFFFF !important;
    --color-surface-2:  #FFFFFF !important;
    --color-text:       #000000 !important;
    --color-text-muted: #1F2937 !important;
    --color-text-subtle:#374151 !important;
    --color-accent:     #1E293B !important;
    --color-accent-deep:#000000 !important;
    --color-rule:       #94A3B8 !important;
  }
  html, body {
    background: #FFFFFF !important;
    color: #000000 !important;
  }

  /* Hide everything that doesn't belong on a printed CV. */
  [data-print-hide],
  .btn-icon,
  .btn-primary[data-action='print'],
  .paper-toggle,
  header.cv-header-nav,
  .template-info,
  footer,
  noscript {
    display: none !important;
  }

  /* Compress section gaps. */
  main > * + * {
    margin-top: 1.4rem !important;
  }
  section {
    page-break-inside: avoid;
  }
  /* Heading hierarchy: large display name, smaller section labels.
     Override the responsive clamp() on h1 so the print h1 lands at 1.875rem. */
  h1 { font-size: 1.875rem !important; line-height: 1.05 !important; }
  h2 { font-size: 0.75rem !important; }
  h3 { font-size: 1rem !important; }
  article > header {
    margin-bottom: 0.8rem !important;
  }
  article > header h1 {
    font-size: 1.875rem !important;
  }

  /* Tags — strip background and border on print so they read as plain text. */
  .tag-cv {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    font-size: 0.8125rem !important;
    color: #374151 !important;
  }
  .tag-cv::after {
    content: ',';
    margin-right: 0.4em;
  }
  .tag-cv:last-child::after { content: ''; }

  /* Links — black with no underline color hint; URLs not auto-printed. */
  a {
    color: #000000 !important;
    text-decoration: underline !important;
    text-decoration-color: #94A3B8 !important;
  }

  /* Hide the on-screen "Download PDF" button itself. */
  [data-action='print'] {
    display: none !important;
  }
}

@layer utilities {
  .text-balance { text-wrap: balance; }
  .text-pretty  { text-wrap: pretty; }
  .text-accent  { color: var(--color-accent); }
  .text-muted   { color: var(--color-text-muted); }
}
