/* Slidura theme foundation — tokens (PORTABLE).
   Source of truth: slidura-pico-site/assets/css/brand.css. Keep in sync.

   Brand layer on top of vendored Pico v2.1.1. Defines the Pico v2 override
   variables AND the app's alias tokens (--bg, --card, --fg, …) in BOTH light
   and dark, so every component — including the bespoke catalog/editor styles in
   app.css that reference the aliases — adapts to dark mode with zero edits.

   IMPORTANT: Pico defines its color tokens under
   `:root:not([data-theme=dark]),[data-theme=light]` (specificity 0,2,0); a plain
   `:root` (0,1,0) loses, so the color blocks below use the same selectors and
   load after pico.min.css.

   PICO CONTRACT — the only Pico v2 variables this foundation depends on. If you
   swap vanilla Pico for anyblades/pico or blades, verify these still resolve:
     --pico-primary, --pico-primary-hover, --pico-primary-background,
     --pico-primary-hover-background, --pico-primary-underline, --pico-primary-focus,
     --pico-background-color, --pico-card-background-color,
     --pico-card-sectioning-background-color, --pico-color, --pico-h1-color,
     --pico-h2-color, --pico-h3-color, --pico-muted-color, --pico-muted-border-color,
     --pico-border-color, --pico-card-border-color, --pico-code-background-color,
     --pico-code-color, --pico-form-element-background-color,
     --pico-form-element-border-color, --pico-card-box-shadow,
     --pico-border-radius, --pico-font-family, --pico-font-family-sans-serif,
     --pico-typography-spacing-vertical
*/

/* Mode-agnostic tokens */
:root {
  --pico-border-radius: 12px;
  --pico-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pico-font-family-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pico-typography-spacing-vertical: 1rem;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(20, 12, 0, 0.04);
  --shadow-md: 0 1px 2px rgba(20, 12, 0, 0.03), 0 4px 12px rgba(20, 12, 0, 0.04);
  /* site-namespaced aliases for the same values */
  --s-radius: 12px;
  --s-radius-sm: 8px;
  --s-shadow-sm: var(--shadow-sm);
  --s-shadow-md: var(--shadow-md);
}

/* inline controls use the smaller radius */
button, input, select, textarea, [role="button"], .pill, .badge, .s-badge {
  --pico-border-radius: 8px;
}

/* Light (default) */
:root:not([data-theme=dark]),
[data-theme=light] {
  --pico-primary: #D24726;
  --pico-primary-hover: #A8381E;
  --pico-primary-background: #D24726;
  --pico-primary-hover-background: #A8381E;
  --pico-primary-underline: rgba(210, 71, 38, 0.5);
  --pico-primary-focus: rgba(210, 71, 38, 0.25);

  --pico-background-color: #fbfaf8;
  --pico-card-background-color: #ffffff;
  --pico-card-sectioning-background-color: #ffffff;
  --pico-color: #0f0e0c;
  --pico-h1-color: #0f0e0c;
  --pico-h2-color: #0f0e0c;
  --pico-h3-color: #0f0e0c;
  --pico-muted-color: #6b6660;
  --pico-muted-border-color: #ece6db;
  --pico-border-color: #ece6db;
  --pico-card-border-color: #ddd5c6;
  --pico-code-background-color: #f5efe4;
  --pico-code-color: #0f0e0c;
  --pico-form-element-background-color: #ffffff;
  --pico-form-element-border-color: #ddd5c6;
  --pico-card-box-shadow: 0 1px 2px rgba(20, 12, 0, 0.04);

  /* site-namespaced */
  --s-accent: #D24726;
  --s-accent-dark: #A8381E;
  --s-accent-tint: rgba(210, 71, 38, 0.08);
  --s-header-bg: rgba(251, 250, 248, 0.85);
  --s-fg: #0f0e0c;     /* Pico reassigns --pico-color on <a>/<button>; use this */
  --s-muted: #6b6660;

  /* app aliases (the bespoke catalog/editor CSS references these) */
  --bg: #fbfaf8;
  --bg-elevated: #ffffff;
  --card: #ffffff;
  --fg: #0f0e0c;
  --muted: #6b6660;
  --accent: #D24726;
  --accent-dark: #A8381E;
  --accent-tint: rgba(210, 71, 38, 0.08);
  --border: #ece6db;
  --border-strong: #ddd5c6;
  --code-bg: #f5efe4;
  --ok-bg: #e7f7ec;  --ok-fg: #1c7a3e;
  --warn-bg: #fff4d6; --warn-fg: #8a5a00;
  --err-bg: #fdebe5;  --err-fg: #b33c1e;
}

/* Dark (derived; keeps the brand orange) */
:root:not([data-theme=light])[data-theme=dark],
[data-theme=dark] {
  --pico-primary: #e0623f;
  --pico-primary-hover: #ef7a5a;
  --pico-primary-background: #D24726;
  --pico-primary-hover-background: #b83f22;
  --pico-primary-underline: rgba(224, 98, 63, 0.5);
  --pico-primary-focus: rgba(224, 98, 63, 0.25);

  --pico-background-color: #191613;
  --pico-card-background-color: #221e1a;
  --pico-card-sectioning-background-color: #221e1a;
  --pico-color: #f3efe8;
  --pico-h1-color: #f7f3ec;
  --pico-h2-color: #f7f3ec;
  --pico-h3-color: #f7f3ec;
  --pico-muted-color: #a39c91;
  --pico-muted-border-color: #34302a;
  --pico-border-color: #34302a;
  --pico-card-border-color: #403a32;
  --pico-code-background-color: #2a251f;
  --pico-code-color: #f3efe8;
  --pico-form-element-background-color: #221e1a;
  --pico-form-element-border-color: #403a32;
  --pico-card-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);

  --s-accent: #e0623f;
  --s-accent-dark: #ef7a5a;
  --s-accent-tint: rgba(224, 98, 63, 0.12);
  --s-header-bg: rgba(25, 22, 19, 0.85);
  --s-fg: #f3efe8;
  --s-muted: #a39c91;

  --bg: #191613;
  --bg-elevated: #221e1a;
  --card: #221e1a;
  --fg: #f3efe8;
  --muted: #a39c91;
  --accent: #e0623f;
  --accent-dark: #ef7a5a;
  --accent-tint: rgba(224, 98, 63, 0.12);
  --border: #34302a;
  --border-strong: #403a32;
  --code-bg: #2a251f;
  --ok-bg: #15311f;  --ok-fg: #7fd39b;
  --warn-bg: #352a12; --warn-fg: #e0c98a;
  --err-bg: #3a1d16;  --err-fg: #f0a58c;
}