/* playground-theme.css
   Valla public-site playground. This is the ONLY file to edit.
   Load order: brand/css/valla-brand.css -> css/colors.css -> css/public.css
   -> css/theme.css -> css/playground-theme.css (last).

   The site keeps some values under two names (valla-brand.css uses
   --valla-color-*, colors.css uses --valla-*; valla-brand.css uses
   --valla-font-*, Core public.css uses --font-*). Every pair is connected
   below, so change the first name of each pair and both files follow.
   Values here are the current brand kit v2 defaults.

   Logos are image files, not CSS: swap the <img src> in the sample pages
   (header: img.brand-logo, footer: .site-footer img) or replace the files
   in brand/logos/svg/. */
:root {
  /* ---------- Palette ---------- */
  --valla-color-navy: #13291f;            --valla-navy: var(--valla-color-navy);
  --valla-color-navy-deep: #0b1a13;       --valla-navy-deep: var(--valla-color-navy-deep);
  --valla-color-navy-soft: #3b5c4b;       --valla-navy-soft: var(--valla-color-navy-soft);
  --valla-color-gold: #8aa57f;            --valla-gold: var(--valla-color-gold);
  --valla-color-gold-accessible: #466438; --valla-gold-accessible: var(--valla-color-gold-accessible);
  --valla-color-gold-light: #bcd5ae;      --valla-gold-light: var(--valla-color-gold-light);
  --valla-color-ivory: #f1f4ec;           --valla-ivory: var(--valla-color-ivory);
  --valla-color-paper: #fbfcf8;           --valla-paper: var(--valla-color-paper);
  --valla-color-slate: #5f7266;           --valla-slate: var(--valla-color-slate);
  --valla-color-sage: #d2dccd;            --valla-sage: var(--valla-color-sage);
  --valla-color-text-muted: #506158;      --valla-text-muted: var(--valla-color-text-muted);
  --valla-color-link: #1c4a34;            --valla-link: var(--valla-color-link);
  --valla-dark-text-muted: #b2c3b8;
  --valla-dark-border: #2e4a3c;

  /* ---------- Roles (light pages) ---------- */
  --valla-color-text: var(--valla-color-navy);
  --valla-color-background: var(--valla-color-paper);
  --valla-color-band: var(--valla-color-ivory);
  --valla-color-surface: var(--valla-color-paper);
  --valla-color-border: var(--valla-color-sage);
  --valla-color-rule: var(--valla-color-navy);
  --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);

  /* Core semantic tokens (colors.css) follow the palette above. */
  --color-bg: var(--valla-color-background);
  --color-bg-muted: var(--valla-color-band);
  --color-surface: var(--valla-color-surface);
  --color-surface-alt: var(--valla-color-band);
  --color-border: var(--valla-color-border);
  --color-text: var(--valla-color-text);
  --color-text-muted: var(--valla-color-text-muted);
  --color-heading: var(--valla-color-text);
  --color-muted: var(--valla-color-text-muted);
  --color-primary: var(--valla-color-button-bg);
  --color-primary-hover: var(--valla-color-navy-soft);
  --color-primary-dark: var(--valla-color-navy-deep);
  --color-primary-soft: var(--valla-color-ivory);
  --color-secondary: var(--valla-color-gold-accessible);
  --color-secondary-hover: var(--valla-color-navy);
  --color-secondary-soft: var(--valla-color-ivory);
  --color-accent: var(--valla-color-accent);
  --color-accent-accessible: var(--valla-color-gold-accessible);
  --color-link: var(--valla-color-link);
  --color-focus-ring: color-mix(in srgb, var(--valla-color-focus) 45%, transparent);

  /* ---------- Alerts ---------- */
  --simbo-success: #3c7a55; --color-success: var(--simbo-success);
  --simbo-warning: #6e4b2e; --color-warning: var(--simbo-warning);
  --simbo-danger: #a3412d;  --color-danger: var(--simbo-danger);
  --simbo-info: var(--valla-color-slate); --color-info: var(--simbo-info);
  --color-success-bg: #e9f3ec;
  --color-warning-bg: #f4ede6;
  --color-danger-bg: #fbe9e4;
  --color-info-bg: var(--valla-color-ivory);

  /* ---------- Type families (new families need font files or a <link>) ---------- */
  --valla-font-text: "Source Serif 4", Georgia, "Times New Roman", serif;
  --valla-font-ui: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --font-serif: var(--valla-font-text);
  --font-sans: var(--valla-font-ui);

  /* ---------- Type scale ---------- */
  --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;
  --valla-weight-semibold: 600;
  --valla-measure: 65ch;

  /* ---------- Space and surfaces ---------- */
  --valla-section-y: clamp(4rem, 8vw, 6.5rem);
  --valla-container: 77.5rem; --shell: var(--valla-container);
  --valla-gutter: 2rem;
  --valla-radius-control: 0.25rem;
  --valla-radius-surface: 0; --radius: var(--valla-radius-surface);
  --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);
  --shadow: none;
  --valla-logo-height: 3.75rem;
}

/* Rules below let the playground reach values theme.css leaves to Core. Keep them. */
.section { padding-block: var(--valla-section-y); }
.hero, .hero-compact, .article-header { padding-block: var(--valla-section-y); }
.hero h1, .article-header h1, .hero-compact h1 { color: var(--color-heading); }
.content-card, .article-card, .person-card, .intake-form, .person-details, .review-note, .cta-panel { border-radius: var(--valla-radius-surface); }
.content-card, .article-card, .person-card, .intake-form { border: var(--valla-border-card); }
.intake-form input, .intake-form select, .intake-form textarea, .button { border-width: var(--valla-border-width); }
.section:nth-of-type(even) { background: var(--valla-color-band); }
.brand-wordmark .brand-logo { height: var(--valla-logo-height); }
[data-valla-theme="dark"] {
  --valla-color-text-muted: var(--valla-dark-text-muted);
  --valla-color-border: var(--valla-dark-border);
  --color-text-muted: var(--valla-dark-text-muted);
  --color-border: var(--valla-dark-border);
}