/* amadorj: Profoliox tokens, inverted to DARK, with the West Five accent.
   Structure and type scale are Profoliox's (references/tokens.css); only the colours change.
   Accent tokens are copied from the West Five build (builds.westfive.io):
     --color-accent  oklch(51.96% .262 286.62)  violet, the one accent
     --color-orange  oklch(77.19% .152 69.58)   kept as a token, unused
     --color-pink    oklch(68.34% .284 330.57)  kept as a token, unused */
:root {
  color-scheme: dark;
  --wf-violet: oklch(51.96% .262 286.62);
  --wf-violet-light: oklch(68% .2 286.62);       /* same hue, lifted for text-size marks on black */
  --wf-orange: oklch(77.19% .152 69.58);
  --wf-pink: oklch(68.34% .284 330.57);

  --background: oklch(0.145 0 0);               /* near-black page, about #0a0a0a */
  --surface: oklch(0.2 0.004 286);              /* photo frames and placeholders */
  --foreground: oklch(0.955 0 0);               /* light ink */
  --muted: oklch(0.235 0.004 286);              /* hovers only */
  --muted-foreground: oklch(0.66 0 0);          /* bracketed labels, meta, dt */
  --primary: oklch(0.955 0 0);                  /* primary button: light pill on black */
  --primary-foreground: oklch(0.145 0 0);
  --accent: var(--wf-violet);                   /* the dot, the active item; used small */
  --accent-foreground: oklch(1 0 0);
  --border: oklch(1 0 0 / 0.12);                /* hairline rules */
  --ring: var(--wf-violet-light);               /* focus outlines */
}
:root {
  --font-sans: "Switzer", ui-sans-serif, system-ui, sans-serif;
  --radius-full: 9999px;
  --width-wrapper: 1360px;
  --gutter: 16px;
  --grid-gap: 16px;
  --space-section: 96px;
  --nav-height: 64px;
}
/* Type: Profoliox Text.astro variants, unchanged */
.display-hero { font-size: 72px; line-height: 0.82; letter-spacing: -0.06em; font-weight: 500; }
.display-2xl  { font-size: 48px; line-height: 0.9;  letter-spacing: -0.045em; font-weight: 500; }
.display-xl   { font-size: 36px; line-height: 0.95; letter-spacing: -0.04em; font-weight: 500; }
.display-lg   { font-size: 30px; line-height: 1;    letter-spacing: -0.035em; font-weight: 500; }
.display-md   { font-size: 24px; line-height: 1.1;  letter-spacing: -0.03em; font-weight: 500; }
.display-sm   { font-size: 20px; line-height: 1.15; letter-spacing: -0.025em; }
.text-lg      { font-size: 18px; line-height: 1.375; letter-spacing: -0.015em; }
.text-base    { font-size: 16px; line-height: 1.625; letter-spacing: -0.01em; }
.text-sm      { font-size: 14px; line-height: 1.5; }
.text-xs      { font-size: 12px; line-height: 1.5; }
@media (min-width: 640px) {
  .display-hero { font-size: 128px; }
  .display-2xl  { font-size: 60px; }
  .display-xl   { font-size: 48px; }
  .display-lg   { font-size: 36px; }
  .display-md   { font-size: 30px; }
  .display-sm   { font-size: 24px; }
}
@media (min-width: 768px) {
  .display-2xl  { font-size: 72px; }
  .display-xl   { font-size: 60px; }
  .display-lg   { font-size: 48px; }
  .display-md   { font-size: 36px; }
  .display-sm   { font-size: 30px; }
  .text-lg      { font-size: 20px; }
}
@media (min-width: 1024px) {
  .display-hero { font-size: 176px; }
  .display-2xl  { font-size: 96px; }
}
@media (min-width: 1280px) {
  .display-hero { font-size: 208px; }
}

/* Dark overrides of components.css */
::selection { background: var(--wf-violet); color: #fff; }
:where(.pf) :focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
/* Nav: Profoliox blends white with `difference` over a white page. On black that is pointless,
   so the nav stays floating with no fill, light items, and a faint blur so it reads over tiles. */
.pf-nav { mix-blend-mode: normal; color: var(--foreground);
  background: linear-gradient(to bottom, color-mix(in oklab, var(--background) 70%, transparent), transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pf-nav__links a[aria-current="page"] { opacity: 1; }
.pf-logo { display: inline-flex; align-items: center; gap: 8px; }
/* Frames on black: the surface tone, not the light-theme grey */
.pf-frame, .pf-index__thumb { background: var(--surface); }
/* Contact band: the veil must darken (components.css mixes --foreground, which is light here) */
.pf-band > img { object-position: center; }
.pf-band::before { background: color-mix(in oklab, black 55%, transparent); }
@media (min-width: 768px) { .pf-band::before { background: linear-gradient(to right, color-mix(in oklab, black 70%, transparent), color-mix(in oklab, black 30%, transparent), transparent); } }
.pf-band__in { color: var(--foreground); }
.pf-btn--ghost { color: var(--foreground); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--foreground) 40%, transparent); }
.pf-btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--foreground); }