@import "./tokens.css";

@font-face {
  font-family: "SansSerifFLF";
  src: url("/fonts/sans-serif-flf/regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "SansSerifFLF";
  src: url("/fonts/sans-serif-flf/italic.otf") format("opentype");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "SansSerifFLF";
  src: url("/fonts/sans-serif-flf/demibold.otf") format("opentype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "SansSerifFLF";
  src: url("/fonts/sans-serif-flf/bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "DominikThin";
  src: url("/fonts/dominik-thin/regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 100;
  font-display: swap;
}
@font-face {
  font-family: "DominikThin";
  src: url("/fonts/dominik-thin/italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 100;
  font-display: swap;
}
@font-face {
  font-family: "GruppoLocal";
  src: url("/fonts/gruppo/regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root[data-main-font="sans-serif-flf"] { --font-main: "SansSerifFLF", Arial, sans-serif; }
:root[data-main-font="dominik-thin"] { --font-main: "DominikThin", sans-serif; }
:root[data-main-font="gruppo"] { --font-main: "GruppoLocal", "Gruppo", Arial, sans-serif; }

/* Toggle `dark:` variants with the Night theme, not the OS setting. */
@custom-variant dark (&:where([data-theme="night"], [data-theme="night"] *));

/* Expose the tokens as Tailwind utilities: bg-paper, text-ink-2, border-rule… */
@theme inline {
  --color-crimson: var(--crimson);
  --color-salmon: var(--salmon);
  --color-rose: var(--rose);
  --color-gold: var(--gold);
  --color-sage: var(--sage);
  --color-paper: var(--paper);
  --color-raised: var(--raised);
  --color-shade: var(--shade);
  --color-ink: var(--ink);
  --color-ink-2: var(--ink-2);
  --color-ink-3: var(--ink-3);
  --color-link: var(--link);
  --color-focus: var(--focus);
  --color-rule: var(--rule);
  --color-rule-strong: var(--rule-strong);
  --color-accent: var(--accent);
  --color-accent-dark: var(--accent-dark);
  --color-accent-wash: var(--accent-wash);
  --color-accent-fill: var(--accent-fill);
  --color-accent-text: var(--accent-text);
  --color-accent-fill-hover: var(--accent-fill-hover);
  --color-button-primary-fill: var(--button-primary-fill);
  --color-button-primary-text: var(--button-primary-text);
  --color-button-primary-fill-hover: var(--button-primary-fill-hover);
  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-error: var(--error);
  --color-info: var(--info);
  --color-accent-2: var(--accent-2);
  --color-accent-2-dark: var(--accent-2-dark);
  --color-accent-2-wash: var(--accent-2-wash);
  --color-accent-2-fill: var(--accent-2-fill);
  --color-accent-2-text: var(--accent-2-text);
  --color-slate: var(--slate);
  --color-fog: var(--fog);
  --color-mint-bright: var(--mint-bright);
  --color-teal: var(--teal);
  --color-indigo-deep: var(--indigo-deep);
  --color-sunflower: var(--sunflower);
  --color-coral: var(--coral);
  --color-peach: var(--peach);
  --color-rose-soft: var(--rose-soft);
  --color-mint-pale: var(--mint-pale);
  --color-blue-gray: var(--blue-gray);
  --color-charcoal: var(--charcoal);
  --color-coral-soft: var(--coral-soft);
  --color-flame: var(--flame);
  --color-parchment: var(--parchment);
  --color-navy: var(--navy);
  --color-orchid: var(--orchid);
  --color-blush: var(--blush);
  --color-midnight: var(--midnight);
  --color-pink-mist: var(--pink-mist);
  --color-amethyst: var(--amethyst);
  --color-berry: var(--berry);
  --color-plum-dark: var(--plum-dark);
  --color-violet: var(--violet);
  --color-red-vivid: var(--red-vivid);
  --color-red-rose: var(--red-rose);
  --color-wine: var(--wine);
  --color-pink-coral: var(--pink-coral);
  --color-lime-soft: var(--lime-soft);
  --color-seashell-1: var(--seashell-1);
  --color-seashell-2: var(--seashell-2);
  --color-seashell-3: var(--seashell-3);
  --color-seashell-4: var(--seashell-4);
  --color-seashell-5: var(--seashell-5);
  --color-tiffany-blue-1: var(--tiffany-blue-1);
  --color-tiffany-blue-2: var(--tiffany-blue-2);
  --color-tiffany-blue-3: var(--tiffany-blue-3);
  --color-rainbow-1: var(--rainbow-1);
  --color-rainbow-2: var(--rainbow-2);
  --color-rainbow-3: var(--rainbow-3);
  --color-rainbow-4: var(--rainbow-4);
  --color-rainbow-5: var(--rainbow-5);
  --color-rainbow-6: var(--rainbow-6);
  --color-rainbow-7: var(--rainbow-7);
  --color-rainbow-8: var(--rainbow-8);
  --color-rainbow-9: var(--rainbow-9);
  --color-arche-white: var(--arche-white);
  --color-arche-white-1: var(--arche-white-1);
  --color-arche-white-2: var(--arche-white-2);
  --color-arche-white-3: var(--arche-white-3);
  --color-arche-white-4: var(--arche-white-4);
  --color-arche-black: var(--arche-black);
  --color-arche-black-1: var(--arche-black-1);
  --color-arche-black-2: var(--arche-black-2);
  --color-arche-black-3: var(--arche-black-3);
  --color-arche-black-4: var(--arche-black-4);
  --color-arche-mist: var(--arche-mist);
  --color-arche-mist-1: var(--arche-mist-1);
  --color-arche-mist-2: var(--arche-mist-2);
  --color-arche-mist-3: var(--arche-mist-3);
  --color-arche-mist-4: var(--arche-mist-4);
  --color-arche-plum: var(--arche-plum);
  --color-arche-plum-1: var(--arche-plum-1);
  --color-arche-plum-2: var(--arche-plum-2);
  --color-arche-plum-3: var(--arche-plum-3);
  --color-arche-plum-4: var(--arche-plum-4);
  --color-arche-rose-1: var(--arche-rose-1);
  --color-arche-rose-2: var(--arche-rose-2);
  --color-arche-rose-3: var(--arche-rose-3);
  --color-arche-rose-4: var(--arche-rose-4);
  --color-arche-crimson-1: var(--arche-crimson-1);
  --color-arche-crimson-2: var(--arche-crimson-2);
  --color-arche-crimson-3: var(--arche-crimson-3);
  --color-arche-crimson-4: var(--arche-crimson-4);
  --color-arche-orange: var(--arche-orange);
  --color-arche-orange-1: var(--arche-orange-1);
  --color-arche-orange-2: var(--arche-orange-2);
  --color-arche-orange-3: var(--arche-orange-3);
  --color-arche-orange-4: var(--arche-orange-4);
  --color-arche-gold-1: var(--arche-gold-1);
  --color-arche-gold-2: var(--arche-gold-2);
  --color-arche-gold-3: var(--arche-gold-3);
  --color-arche-gold-4: var(--arche-gold-4);
  --color-arche-green: var(--arche-green);
  --color-arche-green-1: var(--arche-green-1);
  --color-arche-green-2: var(--arche-green-2);
  --color-arche-green-3: var(--arche-green-3);
  --color-arche-green-4: var(--arche-green-4);
  --color-arche-sage-1: var(--arche-sage-1);
  --color-arche-sage-2: var(--arche-sage-2);
  --color-arche-sage-3: var(--arche-sage-3);
  --color-arche-sage-4: var(--arche-sage-4);
  --color-peach-coral: var(--peach-coral);
  --color-sunset: var(--sunset);
  --color-jasmine: var(--jasmine);
  --color-mindaro: var(--mindaro);
  --color-aquamarine: var(--aquamarine);
  --color-light-green: var(--light-green);
  --color-ice-blue: var(--ice-blue);
  --color-electric-blue: var(--electric-blue);
  --color-jordy-blue: var(--jordy-blue);
  --color-vista-blue: var(--vista-blue);
  --color-tropical-indigo: var(--tropical-indigo);
  --color-lilac: var(--lilac);
  --color-lavender-soft: var(--lavender-soft);
  --color-heliotrope-soft: var(--heliotrope-soft);
  --color-violet-light: var(--violet-light);
  --color-persian-pink: var(--persian-pink);
  --color-amaranth-pink: var(--amaranth-pink);
  --color-tickle-pink: var(--tickle-pink);
  --color-salmon-pink: var(--salmon-pink);
  --color-light-coral: var(--light-coral);
  --color-coral-pink: var(--coral-pink);
  --color-melon: var(--melon);
  --color-sage-gold: var(--sage-gold);
  --color-straw: var(--straw);
  --color-pistachio: var(--pistachio);
  --color-tiffany-mint: var(--tiffany-mint);
  --color-isabelline-1: var(--isabelline-1);
  --color-isabelline-2: var(--isabelline-2);
  --color-isabelline-3: var(--isabelline-3);
  --color-isabelline-4: var(--isabelline-4);
  --color-isabelline-5: var(--isabelline-5);
  --color-isabelline-6: var(--isabelline-6);
  --color-isabelline-7: var(--isabelline-7);
  --color-sea-sage-2: var(--sea-sage-2);
  --color-sea-sage-3: var(--sea-sage-3);
  --color-sea-sage-4: var(--sea-sage-4);
  --color-sea-sage-5: var(--sea-sage-5);
  --color-sea-sage-6: var(--sea-sage-6);
  --color-sea-sage-7: var(--sea-sage-7);
  --font-sans: var(--font-main);
  --font-mono: var(--mono);
  --radius-selector: var(--radius-selector);
  --radius-field: var(--radius-field);
  --radius-button: var(--radius-button);
  --radius-box: var(--radius-box);
  --shadow-surface: var(--shadow-surface);
  --shadow-menu: var(--shadow-menu);
  --ease-brand: var(--ease);
}

html,
body {
  background: var(--paper);
  color: var(--ink);
}

body {
  font-family: var(--sans);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--accent-fill);
  color: var(--accent-text);
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.button-primary {
  border: 1px solid var(--rule-strong);
  background: var(--button-primary-fill);
  color: var(--button-primary-text);
  transition: background-color var(--duration-fast) var(--ease);
}

.button-primary:hover {
  background: var(--button-primary-fill-hover);
}

/* Short metadata and labels use Space Mono. */
.label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--ink-2);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

.arche-theme-toggle { display: inline-flex; align-items: center; gap: 0.55rem; border: 1px solid var(--rule-strong); border-radius: 9999px; padding: 0.45rem 0.75rem; background: var(--raised); color: var(--ink); font: 500 0.75rem/1 var(--sans); transition: background-color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease); }
.arche-theme-toggle:hover { background: var(--shade); }
.arche-theme-toggle__dot { width: 0.65rem; height: 0.65rem; border-radius: 9999px; background: var(--gold); box-shadow: 0 0 0 2px var(--accent-wash); }
[data-theme="night"] .arche-theme-toggle__dot { background: var(--arche-sage-2); box-shadow: 0 0 0 2px var(--arche-mist-4); }
.arche-site-footer { width: 100%; border-top: 1px solid var(--rule); padding: 1.25rem 1rem; color: var(--ink-2); text-align: center; font: 10px/1.5 var(--mono); letter-spacing: 0.04em; }

.arche-theme-toggle--compact { padding: 0.4rem; }
.arche-theme-toggle--compact > span:last-child { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }