/* Logo lettering is a vector asset; these fonts are for website content. */
:root, [data-theme="dark"] {
  --color-canvas: #14261F;
  --color-surface: #1E3228;
  --color-raised: #2A3F33;
  --color-text: #FAF7EE;
  --color-muted: #B2C4B7;
  --color-primary: #A9D8BD;
  --color-primary-text: #14261F;
  --color-picks: #F1D785;
  --color-drop: #FF8585;
  --color-border: #425D4C;
  --color-control-border: #8CA493;
}
[data-theme="light"] {
  --color-canvas: #FAF7EE;
  --color-surface: #F0F3EA;
  --color-raised: #E4EBDD;
  --color-text: #14261F;
  --color-muted: #4F6254;
  --color-primary: #286345;
  --color-primary-text: #FAF7EE;
  --color-picks: #796018;
  --color-drop: #B52D35;
  --color-border: #CDD8C8;
  --color-control-border: #70816F;
}

:root {
  --font-heading: "Montserrat", "Arial", sans-serif;
  --font-body: "Open Sans", "Segoe UI", sans-serif;
  --type-hero: clamp(2rem, 4vw, 3rem);
  --type-h1: 2.25rem; --type-h2: 1.75rem; --type-h3: 1.375rem;
  --type-body: 1rem; --type-small: .875rem; --type-caption: .75rem;
  --radius-card: 1rem; --radius-control: .75rem;
}
.brand-surface { color: var(--color-text); background: var(--color-canvas); font: 400 var(--type-body)/1.6 var(--font-body); }
.brand-heading { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; }
.brand-button { background: var(--color-primary); color: var(--color-primary-text); border: 0; border-radius: var(--radius-control); padding: .75rem 1.25rem; font: 700 1rem/1.5 var(--font-body); }
.brand-control { color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-control-border); }
.brand-focus:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.brand-link { color: var(--color-primary); text-decoration: underline; }
.verdict { display: inline-block; border: 0; border-radius: 999px; padding: .3rem .8rem; font: 700 .875rem/1.4 var(--font-body); }
.verdict-dibs { background: var(--color-primary); color: var(--color-primary-text); }
.verdict-maybe { background: var(--color-text); color: var(--color-canvas); }
.verdict-pass, .verdict-drop { background: var(--color-drop); color: var(--color-canvas); }