/* Writexel brand layer — retunes the Modernist tokens to the logo's navy + gold
   and swaps the type pairing. Tokens and element resets only. */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600;6..72,700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&display=swap');

:root {
  --color-bg: #f6f5f1;
  --color-surface: #eceae3;
  --color-text: #101b2d;
  --color-divider: color-mix(in srgb, #101b2d 30%, transparent);

  /* primary role — the logo navy */
  --color-accent: #011e49;
  --color-accent-100: #eaeef6;
  --color-accent-200: #d2dcec;
  --color-accent-300: #adbdd8;
  --color-accent-400: #7089b2;
  --color-accent-500: #2b4a7d;
  --color-accent-600: #011735;
  --color-accent-700: #011e49;
  --color-accent-800: #010f28;
  --color-accent-900: #010a1b;

  /* second role — the logo gold */
  --color-accent-2: #d69b22;
  --color-accent-2-100: #fdf7e8;
  --color-accent-2-200: #f8e9c5;
  --color-accent-2-300: #f0d493;
  --color-accent-2-400: #e4ba58;
  --color-accent-2-500: #d69b22;
  --color-accent-2-600: #b57f14;
  --color-accent-2-700: #8c6008;
  --color-accent-2-800: #644405;
  --color-accent-2-900: #3f2b03;

  --gold: #d69b22;
  --gold-ink: #8c6008;
  --navy: #011e49;

  --font-heading: "Newsreader", Georgia, serif;
  --font-heading-weight: 600;
  --font-body: "DM Sans", system-ui, sans-serif;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #101b2d 12%, transparent);
  --shadow-md: 0 4px 14px color-mix(in srgb, #101b2d 14%, transparent);
  --shadow-lg: 0 16px 40px color-mix(in srgb, #101b2d 20%, transparent);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; }

a { color: var(--color-accent-2-700); text-decoration: none; }
a:hover { color: var(--color-accent); }

.nav-brand { font-family: var(--font-heading); }
.card-title { font-family: var(--font-heading); font-weight: 600; }
.btn { font-family: var(--font-body); font-weight: 500; letter-spacing: 0.01em; }

summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

::selection { background: var(--color-accent-2-300); color: var(--color-text); }
:focus-visible { outline: 2px solid var(--color-accent-2); outline-offset: 2px; }