/*
 * Valla Wealth brand tokens, version 2
 * Fonts, colors, type scale, spacing and surfaces as CSS custom properties.
 * This file sets no element styles. Pair it with valla-base.css for those,
 * or use the variables in your own stylesheet.
 */

/* ---------- Fonts (SIL Open Font License, self-hosted) ---------- */

@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4/SourceSerif4-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4/SourceSerif4-Italic-Variable.woff2") format("woff2");
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("../fonts/public-sans/PublicSans-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("../fonts/public-sans/PublicSans-Italic-Variable.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* ---------- Palette ---------- */
  --valla-color-navy: #0b1d2a;
  --valla-color-navy-deep: #07131c;
  --valla-color-navy-soft: #314e63;
  --valla-color-gold: #c9a96e;            /* logo, rules, large numerals only: 2.2:1 on paper */
  --valla-color-gold-accessible: #80642e; /* small gold text on light: 5.5:1 on paper */
  --valla-color-gold-light: #e1c99b;      /* links and accents on dark: 10.6:1 on navy */
  --valla-color-ivory: #f7f4ee;
  --valla-color-paper: #fffdf9;
  --valla-color-slate: #6b7a88;
  --valla-color-sage: #d7ddd6;

  /* ---------- Roles (light) ---------- */
  --valla-color-text: var(--valla-color-navy);            /* 16.9:1 on paper */
  --valla-color-text-muted: #566674;                      /* 5.8:1 on paper, 5.4:1 on ivory */
  --valla-color-background: var(--valla-color-paper);     /* default page */
  --valla-color-band: var(--valla-color-ivory);           /* occasional section tint */
  --valla-color-surface: var(--valla-color-paper);
  --valla-color-border: var(--valla-color-sage);
  --valla-color-rule: var(--valla-color-navy);
  --valla-color-link: #17364c;                            /* 12.4:1 on paper */
  --valla-color-link-hover: var(--valla-color-gold-accessible);
  --valla-color-accent: var(--valla-color-gold);
  --valla-color-focus: var(--valla-color-gold-accessible);
  --valla-color-button-bg: var(--valla-color-navy);
  --valla-color-button-text: var(--valla-color-paper);

  /* ---------- Type families ---------- */
  --valla-font-text: "Source Serif 4", Georgia, "Times New Roman", serif;
  --valla-font-ui: "Public Sans", "Helvetica Neue", Arial, sans-serif;

  /* ---------- Type scale: size / line height / weight ---------- */
  --valla-text-display: clamp(2.75rem, 5.6vw, 4.75rem);
  --valla-leading-display: 1.03;
  --valla-tracking-display: -0.01em;

  --valla-text-h2: clamp(2rem, 3.2vw, 2.75rem);
  --valla-leading-h2: 1.12;

  --valla-text-h3: 1.5rem;
  --valla-leading-h3: 1.3;

  --valla-text-lead: 1.3125rem;
  --valla-leading-lead: 1.5;

  --valla-text-body: 1.125rem;
  --valla-leading-body: 1.55;

  --valla-text-ui: 1rem;
  --valla-leading-ui: 1.4;

  --valla-text-caption: 0.875rem;
  --valla-leading-caption: 1.45;

  --valla-text-disclosure: 0.8125rem;
  --valla-leading-disclosure: 1.5;

  --valla-weight-regular: 400;
  --valla-weight-medium: 500;   /* buttons, table headers (Public Sans) */
  --valla-weight-semibold: 600; /* H3 (Source Serif 4) */

  --valla-measure: 65ch;

  /* ---------- Space (4 px base) ---------- */
  --valla-space-1: 0.25rem;
  --valla-space-2: 0.5rem;
  --valla-space-3: 0.75rem;
  --valla-space-4: 1rem;
  --valla-space-5: 1.5rem;
  --valla-space-6: 2rem;
  --valla-space-7: 3rem;
  --valla-space-8: 4rem;
  --valla-space-9: 6rem;
  --valla-section-y: clamp(4rem, 8vw, 6.5rem);
  --valla-container: 77.5rem; /* 1240 px */
  --valla-gutter: 2rem;

  /* ---------- Surfaces ---------- */
  --valla-radius-control: 0.25rem; /* buttons and inputs */
  --valla-radius-surface: 0;       /* cards, images, sections */
  --valla-border-width: 1px;
  --valla-border-card: var(--valla-border-width) solid var(--valla-color-border);
  --valla-rule-accent: 2px solid var(--valla-color-gold);
}

/* ---------- Dark sections or pages ---------- */
[data-valla-theme="dark"] {
  color-scheme: dark;
  --valla-color-text: var(--valla-color-ivory);           /* 15.6:1 on navy */
  --valla-color-text-muted: #b8c1c6;                      /* 9.4:1 on navy */
  --valla-color-background: var(--valla-color-navy);
  --valla-color-band: var(--valla-color-navy-deep);
  --valla-color-surface: var(--valla-color-navy);
  --valla-color-border: #314654;
  --valla-color-rule: var(--valla-color-ivory);
  --valla-color-link: var(--valla-color-gold-light);
  --valla-color-link-hover: var(--valla-color-ivory);
  --valla-color-focus: var(--valla-color-gold-light);
  --valla-color-button-bg: var(--valla-color-ivory);
  --valla-color-button-text: var(--valla-color-navy);
}