/* North Shore: Sean Beaverson's personal brand system, from BrandID/North Shore Design System/tokens/.
   fonts, colors, typography, spacing, effects, and base, joined in that order with their values unchanged;
   the Electric Lake theme is left out (one palette per piece). North Shore defines a light theme only:
   the site's Night is drawn from these same scales at the top of assets/site.css. */

/* ---- tokens/fonts.css ---- */
/* Substitutes via Google Fonts. Montserrat stands in for the geometric sans of the wordmark (Gotham-like). */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=IBM+Plex+Mono:wght@400;500&display=swap");

/* ---- tokens/colors.css ---- */
:root{
  /* Brand — from the logo board ("02 / North Shore") */
  --brand-beaver:#20384F; /* Beaver / Name */
  --brand-sun:#C47D4D;    /* Sun / Star */
  --brand-water:#608C9B;  /* Water */
  --brand-cream:#F4F1EB;  /* Background */

  /* Beaver navy scale */
  --navy-900:#142434; --navy-800:#1A2E41; --navy-700:#20384F; --navy-600:#2E4B66;
  --navy-500:#45627D; --navy-400:#6E8599; --navy-300:#9DAEBC; --navy-200:#C8D2DA; --navy-100:#E3E8EC;
  /* Sun copper scale */
  --sun-800:#8A522C; --sun-700:#A9653A; --sun-600:#C47D4D; --sun-500:#D09466;
  --sun-400:#DCAD88; --sun-200:#EFD8C5; --sun-100:#F7EBE0;
  /* Water slate-teal scale */
  --water-800:#3E6573; --water-700:#4D7887; --water-600:#608C9B; --water-400:#8BAEBA;
  --water-200:#C5D8DE; --water-100:#E3EDF0;
  /* Cream neutrals */
  --cream-50:#FAF8F4; --cream-100:#F4F1EB; --cream-200:#EAE5DB; --cream-300:#DCD5C7; --cream-400:#BFB6A5; --cream-500:#9A9081;

  /* Status (derived to sit with the palette) */
  --pine-700:#3F6650; --pine-100:#E2ECE4;
  --rust-700:#9E3F35; --rust-100:#F4E1DD;

  /* Semantic — surfaces */
  --surface-page:var(--cream-100);
  --surface-raised:var(--cream-50);
  --surface-sunken:var(--cream-200);
  --surface-inverse:var(--navy-700);
  --surface-inverse-deep:var(--navy-900);
  --surface-accent:var(--sun-600);
  --surface-accent-soft:var(--sun-100);
  --surface-water-soft:var(--water-100);

  /* Semantic — text */
  --fg-1:var(--navy-700);   /* body + headings, 10.9:1 on cream */
  --fg-2:var(--navy-500);   /* secondary, 5.6:1 */
  --fg-3:var(--navy-400);   /* meta, large text only */
  --fg-on-inverse:var(--cream-100);
  --fg-on-inverse-2:var(--navy-200);
  --fg-accent:var(--sun-800); /* copper text that passes 4.5:1 */
  --fg-on-accent:var(--navy-900);
  --fg-link:var(--navy-700);
  --fg-link-hover:var(--sun-800);

  /* Semantic — lines */
  --border-hairline:var(--cream-300);
  --border-strong:var(--navy-700);
  --border-focus:var(--sun-600);

  /* Semantic — status */
  --status-success:var(--pine-700); --status-success-bg:var(--pine-100);
  --status-warning:var(--sun-800);  --status-warning-bg:var(--sun-100);
  --status-danger:var(--rust-700);  --status-danger-bg:var(--rust-100);
  --status-info:var(--water-800);   --status-info-bg:var(--water-100);
}

/* ---- tokens/typography.css ---- */
:root{
  --font-sans:"Montserrat","Gotham","Proxima Nova",system-ui,sans-serif;
  --font-serif:"Newsreader","Iowan Old Style",Georgia,serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  --text-display-xl:72px; --text-display:56px; --text-h1:40px; --text-h2:30px; --text-h3:22px;
  --text-lead:21px; --text-body:17px; --text-small:14px; --text-eyebrow:12px; --text-caption:12px;

  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;
  --leading-tight:1.08; --leading-snug:1.25; --leading-body:1.6;
  --tracking-display:-0.02em; --tracking-heading:-0.01em; --tracking-eyebrow:0.18em; --tracking-label:0.08em;

  /* Semantic roles */
  --type-display:600 var(--text-display)/var(--leading-tight) var(--font-sans);
  --type-h1:600 var(--text-h1)/var(--leading-tight) var(--font-sans);
  --type-h2:600 var(--text-h2)/var(--leading-snug) var(--font-sans);
  --type-h3:600 var(--text-h3)/var(--leading-snug) var(--font-sans);
  --type-lead:400 var(--text-lead)/1.5 var(--font-serif);
  --type-body:400 var(--text-body)/var(--leading-body) var(--font-serif);
  --type-ui:500 15px/1.3 var(--font-sans);
  --type-small:400 var(--text-small)/1.5 var(--font-sans);
  --type-eyebrow:600 var(--text-eyebrow)/1.2 var(--font-sans);
}

/* ---- tokens/spacing.css ---- */
:root{
  --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;
  --radius-xs:2px; --radius-sm:4px; --radius-md:8px; --radius-lg:14px; --radius-pill:999px;
  --content-narrow:640px; --content-default:960px; --content-wide:1200px;
  --control-sm:32px; --control-md:40px; --control-lg:48px;
}

/* ---- tokens/effects.css ---- */
:root{
  --border-width:1px; --border-width-strong:1.5px;
  --shadow-1:0 1px 2px rgba(20,36,52,.08);
  --shadow-2:0 2px 6px rgba(20,36,52,.08),0 8px 24px rgba(20,36,52,.06);
  --shadow-3:0 12px 40px rgba(20,36,52,.16);
  --focus-ring:0 0 0 3px var(--cream-100),0 0 0 5px var(--sun-600);
  --scrim:rgba(20,36,52,.48);
  --ease-out:cubic-bezier(.2,.7,.2,1); --ease-in-out:cubic-bezier(.6,0,.3,1);
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:360ms;
}

/* ---- tokens/base.css ---- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--fg-1);font:var(--type-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-sans);font-weight:600;letter-spacing:var(--tracking-heading);text-wrap:balance;margin:0}
p{text-wrap:pretty}
a{color:var(--fg-link);text-decoration:underline;text-decoration-color:var(--sun-600);text-decoration-thickness:1.5px;text-underline-offset:3px;transition:color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--fg-link-hover)}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
::selection{background:var(--sun-200);color:var(--navy-900)}