/* Harris By Design — design tokens.
   Ported verbatim from the design system handoff (tokens/*.css). The whole
   system is two colours: #efecec paper, #6c6d6f ink. There is no accent
   colour — all the colour on the page comes from Deanie's artwork. */

@import url("https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500&display=swap");

:root {
  /* Base palette */
  --paper: #efecec;        /* page background, the only background colour */
  --paper-tint: #e6e2e2;   /* image placeholder / hovered surface */
  --paper-deep: #dcd8d8;   /* rules, dividers, tile skeleton */
  --white: #ffffff;
  --ink: #6c6d6f;          /* all body + nav text */
  --ink-strong: #4e4f51;   /* active nav, emphasis, headings on hover */
  --ink-soft: #9a9b9d;     /* meta, captions, disabled */
  --ink-faint: #c2c1c1;    /* hairlines over paper */

  /* Semantic aliases */
  --surface-page: var(--paper);
  --surface-raised: var(--white);
  --surface-placeholder: var(--paper-tint);
  --text-body: var(--ink);
  --text-heading: var(--ink);
  --text-emphasis: var(--ink-strong);
  --text-meta: var(--ink-soft);
  --text-inverse: var(--paper);
  --border-hairline: var(--ink-faint);
  --border-rule: var(--paper-deep);
  --link: var(--ink);
  --link-hover: var(--ink-strong);
  --focus-ring: var(--ink-strong);

  /* Type */
  --font-sans: "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: var(--font-sans);
  --font-display: var(--font-sans);

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;

  --text-nav: 13px;
  --text-section: 13px;
  --text-caption: 12px;
  --text-body-sm: 15px;
  --text-body-md: 16px;
  --text-body-lg: 18px;
  --text-title: 26px;
  --text-title-lg: 34px;

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-body: 1.75;

  --track-tight: 0;
  --track-wide: .14em;   /* nav items, buttons */
  --track-wider: .22em;  /* section headings — the system's signature move */

  --type-nav: var(--weight-regular) var(--text-nav)/1 var(--font-sans);
  --type-section-heading: var(--weight-regular) var(--text-section)/1 var(--font-sans);
  --type-page-title: var(--weight-light) var(--text-title-lg)/var(--leading-tight) var(--font-sans);
  --type-body: var(--weight-light) var(--text-body-md)/var(--leading-body) var(--font-sans);
  --type-caption: var(--weight-regular) var(--text-caption)/1.4 var(--font-sans);

  /* Space */
  --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: 140px;

  /* Layout */
  --page-gutter: 40px;
  --page-gutter-sm: 20px;
  --page-max: 1440px;
  --prose-max: 620px;
  --sidebar-width: 318px;

  /* Staggered work grid */
  --grid-columns: 3;
  --grid-gap: 22px;
  --section-gap: var(--space-9);

  /* Shape — square-cornered throughout */
  --radius-none: 0px;
  --radius-sm: 2px;
  --border-width: 1px;

  /* Motion */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 150ms;
  --dur-base: 280ms;
  --dur-slow: 600ms;
  --hover-zoom: 1.04;
  --hover-opacity: .62;
  --press-opacity: .45;
  --transition-link: color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
  --transition-zoom: transform var(--dur-base) var(--ease-out);
  --transition-reveal: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);

  /* The brand uses no shadows. Declared as an explicit zero so nothing
     reaches for a framework default. */
  --shadow-none: none;
}

/* Element resets — tokens/base.css */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font: var(--type-body);
}

*, *::before, *::after { box-sizing: border-box; }

img { display: block; max-width: 100%; }

a {
  color: var(--link);
  text-decoration: none;
  transition: var(--transition-link);
}

a:hover { color: var(--link-hover); opacity: var(--hover-opacity); }
a:active { opacity: var(--press-opacity); }
a:focus-visible { outline: 1px solid var(--focus-ring); outline-offset: 3px; }

h1, h2, h3, h4, p { margin: 0; }

button { font: inherit; color: inherit; }

::selection { background: var(--paper-deep); color: var(--ink-strong); }