/* ---------------------------------------------------------------------------
   Pedro Palavra — design system tokens
   Mirrored from the Claude Design project
   "Pedro Palavra Design System" (e15b0dcf-468a-4c68-b98e-6e523b48ffe9).
   Values are verbatim; keep them in sync with the design system, not by hand.
   --------------------------------------------------------------------------- */

/* --- fonts -----------------------------------------------------------------
   The design system ships Montserrat as variable + static TTFs. They are not
   redistributed here; the Google Fonts link in every page supplies the same
   family. To self-host, create assets/fonts/, drop the four TTFs in and uncomment
   the block below (then remove the <link> from the pages).

@font-face{font-family:"Montserrat";src:url("../fonts/Montserrat-Variable.ttf") format("truetype-variations");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("../fonts/Montserrat-Italic-Variable.ttf") format("truetype-variations");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Montserrat Static";src:url("../fonts/Montserrat-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat Static";src:url("../fonts/Montserrat-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
--------------------------------------------------------------------------- */

:root{
  /* base — warm monochrome ramp */
  --ink-900:#0B0B0A;
  --ink-800:#161614;
  --ink-700:#2A2825;
  --ink-600:#403D38;
  --ink-500:#6B6862;
  --ink-400:#8E8A82;
  --ink-300:#B3AEA5;
  --ink-200:#D2CDC3;
  --ink-100:#E6E1D7;
  --paper:#F5F3EE;
  --paper-pure:#FFFFFF;
  --wash:#EAE5DB;

  /* base — accent */
  --signal-600:#A32D13;
  --signal-500:#D8401F;
  --signal-400:#E8734F;
  --signal-100:#F7DCD2;

  /* base — semantic hues (used sparingly, forms only) */
  --positive-500:#3F6B4A;
  --positive-100:#DFE9E0;
  --negative-500:#9E2A1F;
  --negative-100:#F4DDD9;

  /* semantic — text */
  --text-primary:var(--ink-900);
  --text-secondary:var(--ink-600);
  --text-muted:var(--ink-400);
  --text-faint:var(--ink-300);
  --text-inverse:var(--paper);
  --text-accent:var(--signal-500);
  --text-link:var(--ink-900);
  --text-link-hover:var(--signal-500);

  /* semantic — surface */
  --surface-page:var(--paper);
  --surface-raised:var(--paper-pure);
  --surface-wash:var(--wash);
  --surface-inverse:var(--ink-900);
  --surface-accent:var(--signal-500);
  --surface-media:var(--ink-100);

  /* semantic — line */
  --border-hairline:rgba(11,11,10,0.14);
  --border-hairline-inverse:rgba(245,243,238,0.18);
  --border-strong:var(--ink-900);
  --focus-ring:var(--signal-500);

  /* type */
  --font-core:"Montserrat","Montserrat Static",system-ui,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;

  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;

  --size-display-xl:clamp(3.5rem,11.5vw,10.5rem);
  --size-display-l:clamp(2.75rem,7vw,6rem);
  --size-display-m:clamp(2rem,4.2vw,3.5rem);
  --lh-display:0.92;
  --ls-display:-0.045em;

  --size-heading-l:2rem;
  --size-heading-m:1.5rem;
  --size-heading-s:1.125rem;
  --lh-heading:1.14;
  --ls-heading:-0.02em;

  --size-body-l:1.125rem;
  --size-body-m:1rem;
  --size-body-s:0.875rem;
  --lh-body:1.55;
  --ls-body:-0.005em;

  --size-label:0.6875rem;
  --size-meta:0.75rem;
  --lh-label:1.2;
  --ls-label:0.16em;
  --ls-meta:0.04em;

  --measure-prose:62ch;
  --measure-narrow:44ch;

  /* spacing & layout */
  --space-0:0;   --space-1:4px;  --space-2:8px;   --space-3:12px;
  --space-4:16px;--space-5:24px; --space-6:32px;  --space-7:48px;
  --space-8:64px;--space-9:96px; --space-10:128px;--space-11:192px;
  --space-12:256px;

  --page-margin:clamp(20px,4.5vw,72px);
  --gutter:24px;
  --grid-columns:12;
  --section-gap:clamp(96px,14vw,192px);
  --block-gap:clamp(32px,4vw,64px);
  --max-width:1680px;
  --nav-height:72px;

  /* surface */
  --radius-none:0px;
  --radius-xs:2px;
  --radius-sm:4px;
  --radius-pill:999px;

  --border-width-hairline:1px;
  --border-width-strong:1.5px;

  --shadow-none:none;
  --shadow-lift:0 1px 2px rgba(11,11,10,0.05),0 18px 40px -24px rgba(11,11,10,0.22);
  --shadow-overlay:0 40px 120px -40px rgba(11,11,10,0.45);
  --shadow-focus:0 0 0 2px var(--surface-page),0 0 0 4px var(--focus-ring);

  --blur-veil:blur(14px);
  --veil-light:rgba(245,243,238,0.72);
  --veil-dark:rgba(11,11,10,0.56);
  --scrim-bottom:linear-gradient(to top,rgba(11,11,10,0.72),rgba(11,11,10,0) 62%);

  --aspect-portrait:3 / 4;
  --aspect-landscape:16 / 10;
  --aspect-still:4 / 3;
  --aspect-cinema:21 / 9;

  /* motion */
  --dur-instant:100ms;
  --dur-fast:180ms;
  --dur-base:340ms;
  --dur-slow:700ms;
  --dur-reveal:1100ms;

  --ease-out:cubic-bezier(0.22,1,0.36,1);
  --ease-in-out:cubic-bezier(0.65,0,0.35,1);
  --ease-linear:linear;

  --hover-opacity:0.55;
  --press-scale:0.985;
  --media-zoom:1.03;
}

[data-theme="night"]{
  --text-primary:var(--paper);
  --text-secondary:var(--ink-200);
  --text-muted:var(--ink-400);
  --text-faint:var(--ink-500);
  --text-inverse:var(--ink-900);
  --text-link:var(--paper);
  --text-link-hover:var(--signal-400);
  --surface-page:var(--ink-900);
  --surface-raised:var(--ink-800);
  --surface-wash:var(--ink-800);
  --surface-inverse:var(--paper);
  --surface-media:var(--ink-700);
  --border-hairline:rgba(245,243,238,0.18);
  --border-strong:var(--paper);
}

@media (prefers-reduced-motion:reduce){
  :root{--dur-fast:1ms;--dur-base:1ms;--dur-slow:1ms;--dur-reveal:1ms}
}

/* --- base ----------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font-family:var(--font-core);font-size:var(--size-body-m);line-height:var(--lh-body);letter-spacing:var(--ls-body);font-weight:var(--weight-regular);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video{display:block;max-width:100%}
a{color:var(--text-link);text-decoration:none;transition:color var(--dur-fast) var(--ease-out),opacity var(--dur-fast) var(--ease-out)}
a:hover{color:var(--text-link-hover)}
::selection{background:var(--signal-500);color:var(--paper)}
:focus-visible{outline:none;box-shadow:var(--shadow-focus)}