/* FirmStroke Portfolio Design System tokens (ported from Claude Design _ds bundle).
   Fonts (Archivo, Oswald, Rye) load from a <link> in each page's <head>. */

:root{
  /* Fonts (webfont substitutes for licensed brand faces) */
  --font-fs-display:'Archivo',system-ui,sans-serif;
  --font-fs-condensed:'Oswald',system-ui,sans-serif;
  --font-fs-script:'Yellowtail',cursive;
  --font-gp-headline:'Archivo',system-ui,sans-serif;
  --font-wovn-headline:'Outfit',system-ui,sans-serif;
  --font-wovn-western:'Rye',serif;

  /* FirmStroke */
  --fs-navy:#0B4166;
  --fs-navy-ink:#0A2439;
  --fs-teal:#135D63;
  --fs-orange:#E56948;
  --fs-peach:#FDD5C3;
  --fs-mint:#B9E1D8;

  /* Gorse Point */
  --gp-ink:#231F20;

  /* WOVN Goods */
  --wovn-green:#1C3325;
  --wovn-cream:#F8EBDB;

  /* Neutrals */
  --white:#FFFFFF;
  --n-200:#DEDEDC;
  --n-300:#C4C4C1;

  /* Semantic (FirmStroke theme) */
  --brand-primary:var(--fs-navy);
  --brand-accent:var(--fs-orange);
  --text-heading:var(--fs-navy-ink);
  --text-body:var(--fs-navy-ink);
  --text-muted:#5B6B79;
  --text-inverse:var(--white);
  --text-on-accent:var(--white);
  --surface-page:var(--white);
  --surface-card:var(--white);
  --surface-sunken:#F2F6F8;
  --border-hairline:#D8E0E6;
  --status-danger:#B8412B;
  --cta-bg:var(--fs-orange);
  --cta-fg:var(--white);
  --cta-bg-hover:#D0563A;
  --cta-bg-active:#B84A31;
  --link:var(--fs-navy);
  --link-hover:var(--fs-orange);
  --focus-ring:var(--fs-teal);
  --font-heading:var(--font-fs-condensed);
  --font-body:var(--font-fs-display);

  /* Type */
  --fs-2xs:11px;
  --fs-xs:12px;
  --fs-sm:14px;
  --fs-base:16px;
  --lh-heading:1.2;
  --lh-body:1.55;
  --ls-wide:0.06em;
  --ls-wider:0.12em;

  /* Spacing / layout */
  --container-max:1280px;
  --gutter-page:24px;
  --section-y:96px;
  --nav-h:72px;
  --control-h-md:44px;
  --control-h-lg:56px;

  /* Surfaces */
  --radius-xs:2px;
  --radius-sm:3px;
  --radius-brand:var(--radius-sm);
  --shadow-lg:0 18px 44px rgba(35,31,32,.16);

  /* Motion */
  --dur-instant:80ms;
  --dur-fast:140ms;
  --dur-base:220ms;
  --dur-slow:360ms;
  --ease-standard:cubic-bezier(.2,0,.2,1);
  --transition-control:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);
  --press-scale:.985;
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--fs-base);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--font-heading);color:var(--text-heading);line-height:var(--lh-heading);font-weight:700}
p{margin:0}
a{color:var(--link);text-decoration:none;transition:color var(--dur-fast) var(--ease-standard)}
a:hover{color:var(--link-hover)}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
::selection{background:var(--brand-accent);color:var(--text-on-accent)}