globals.css

@import 'tailwindcss';

@theme {
  /* ─── Colors ─────────────────────────────────────────── */
  --color-obsidian: #0a0a0a;
  --color-graphite: #111111;
  --color-carbon: #1a1a1a;
  --color-chrome: #c0c0c0;
  --color-platinum: #e8e8e8;
  --color-pearl: #f5f5f0;
  --color-racing-green: #0b3d2e;
  /* racing-green-lit and mist were tuned to clear WCAG AA contrast (4.5:1+)
     against obsidian, graphite and carbon. Previous values (1a6b50 and
     3a3a3a) failed Lighthouse on small captions. The new values keep the
     muted editorial feel while passing the audit. */
  --color-racing-green-lit: #34a07a;
  --color-gold-leaf: #b8963e;
  --color-mist: #858585;

  /* ─── Font Families ──────────────────────────────────── */
  --font-display: var(--font-cormorant), Georgia, serif;
  --font-sans: var(--font-inter), system-ui, sans-serif;
  --font-mono: var(--font-jetbrains), ui-monospace, monospace;

  /* ─── Font Sizes + Line Heights ──────────────────────── */
  --text-display-xl: 5rem;
  --text-display-xl--line-height: 1.05;
  --text-display-xl--font-weight: 300;

  --text-display-lg: 3.5rem;
  --text-display-lg--line-height: 1.1;
  --text-display-lg--font-weight: 300;

  --text-display-md: 2rem;
  --text-display-md--line-height: 1.2;
  --text-display-md--font-weight: 400;

  --text-body-lg: 1.125rem;
  --text-body-lg--line-height: 1.75;
  --text-body-lg--font-weight: 300;

  --text-body: 1rem;
  --text-body--line-height: 1.7;
  --text-body--font-weight: 300;

  --text-caption: 0.75rem;
  --text-caption--line-height: 1.5;
  --text-caption--font-weight: 400;

  /* ─── Letter Spacing ─────────────────────────────────── */
  --tracking-luxury: 0.15em;
  --tracking-wide: 0.08em;
  --tracking-tight: -0.02em;

  /* ─── Box Shadows ────────────────────────────────────── */
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-card-hover: 0 16px 48px rgba(0, 0, 0, 0.6);
  --shadow-glow-green: 0 0 24px rgba(26, 107, 80, 0.2);
}

@layer base {
  html {
    background-color: var(--color-obsidian);
    color-scheme: dark;
    scroll-padding-top: 5rem;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    font-feature-settings:
      'kern' 1,
      'liga' 1,
      'calt' 1;
  }

  /* Cormorant has true small caps and old-style figures; opt in where they
     belong so display text reads as set, not faked. */
  .font-display {
    font-feature-settings:
      'kern' 1,
      'liga' 1,
      'dlig' 1,
      'onum' 1;
  }

  /* Years, metrics and any aligned columns of digits should sit on a uniform
     advance so they do not shimmer when adjacent rows update. */
  .tabular-nums,
  time,
  [data-numeric] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
  }

  /* Real small caps for caption-style mono labels with the .smallcaps class. */
  .smallcaps {
    font-variant-caps: all-small-caps;
    letter-spacing: 0.08em;
  }

  /* First-letter drop cap used in long-form prose (case studies). Falls back
     gracefully when the element has no first character. */
  .dropcap::first-letter {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    color: var(--color-gold-leaf);
    float: left;
    font-size: 4.5em;
    line-height: 0.85;
    margin: 0.05em 0.12em 0 -0.05em;
  }

  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }

    /* Browser-driven view transitions on same-document navigation. The
       shared element is the project title: card heading on the home,
       page heading on /projects/[slug]. Both carry the same
       view-transition-name so the browser morphs between them. */
    ::view-transition-old(*),
    ::view-transition-new(*) {
      animation-duration: 220ms;
      animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    }
  }

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

  /* Print stylesheet. Keeps the editorial structure while flipping to a
     light page for ink, dropping ornaments that do not survive print
     (gold-leaf hairlines that read as ghost lines, the back-to-top
     button, navbar, scroll indicator), and forcing colour-correct text
     so the dropcap and pull quote read on white. */
  @media print {
    html,
    body {
      background-color: #ffffff !important;
      color: #1a1a1a !important;
    }

    /* Strip layout chrome that has no value in print. */
    nav[aria-label='Primary'],
    [aria-label='Voltar ao topo'],
    button[aria-label='Abrir menu'],
    [aria-hidden='true'] {
      display: none !important;
    }

    main {
      padding: 0 !important;
    }

    article {
      max-width: 100% !important;
      padding: 0 !important;
    }

    /* All headings and copy go monochrome on white. */
    h1,
    h2,
    h3,
    h4,
    p,
    li,
    span,
    blockquote,
    figcaption,
    dt,
    dd,
    time {
      color: #1a1a1a !important;
    }

    /* Hairline rules and accents in pure black so they actually print. */
    .bg-gold-leaf,
    .bg-mist,
    .bg-mist\/30,
    .bg-mist\/40 {
      background-color: #1a1a1a !important;
    }

    /* Drop cap stays as the visual signature but in black ink. */
    .dropcap::first-letter {
      color: #1a1a1a !important;
    }

    /* Underlines on links so a printed reader can copy the URL. */
    a[href^='http']::after {
      content: ' (' attr(href) ')';
      font-size: 0.75em;
      color: #555555;
    }

    /* Avoid splitting a section heading from its first paragraph. */
    h1,
    h2,
    h3 {
      break-after: avoid;
      page-break-after: avoid;
    }

    /* Avoid splitting blockquote pull-quotes mid-page. */
    blockquote,
    figure {
      break-inside: avoid;
      page-break-inside: avoid;
    }

    /* Image optimisation: print full-quality, no grayscale filter. */
    img {
      filter: none !important;
      -webkit-filter: none !important;
    }

    /* Page setup: A4-ish margins so editorial breathing room survives. */
    @page {
      margin: 18mm;
    }
  }
}