/*
 * Brandura design tokens — the single source of truth for the design system.
 *
 * The /design-system pages are generated from this file: every token below is
 * parsed by services/design_system.py and rendered as a swatch or specimen, so
 * adding a token here is all it takes to document it.
 *
 * Format the parser relies on:
 *   / * @group <key> | <Title> | <description> * /      starts a group
 *   --ds-name: value; / * Label | usage | source * /     one token
 * Source is a slug from SOURCES in services/design_system.py.
 *
 * Palette names and values are the official ones from the Figma color page
 * (source "figma-colors"). Families run Dk → Md → base → Lt → Pl (pale).
 */

:root {
  /* @group brand | Brand | Brandura Red is the logo dots. Use sparingly: the logo and a single accent, never a surface. */
  --ds-red: #FF470B; /* Brandura Red | Logo dots, product-tile accent | figma-colors */
  --ds-blue-lt: #E1EEFF; /* Lt Blue | Surface; text on Dk Warm Gray | figma-colors */
  --ds-white: #FFFFFF; /* White | Cards and bars on any light surface | figma-colors */
  --ds-black: #1D1D1F; /* Black | Body and statement text | figma-colors */

  /* @group olive | Olive | The brand's green family. Dk Olive and Md Olive also carry eyebrows and big stats on light surfaces. */
  --ds-olive-dk: #32392E; /* Dk Olive | Dark data surface; eyebrows on light | figma-colors */
  --ds-olive-md: #60756E; /* Md Olive | Big stats; panels on Dk Olive | figma-colors */
  --ds-olive: #9EC6B1; /* Olive | Rings, progress, stats on Dk Olive | figma-colors */
  --ds-olive-lt: #CFEDE1; /* Lt Olive | Testimonial surface | figma-colors */
  --ds-olive-pl: #E8F8E6; /* Pl Olive | Text on Dk Olive | figma-colors */

  /* @group violet | Gray-Violet | Cool family; the darkest step is Dk Gray-Violet, the rest are Warm Gray-Violet. */
  --ds-violet-dk: #413B4F; /* Dk Gray-Violet | Dark data surface | figma-colors */
  --ds-violet-md: #7C6F99; /* Md Warm Gray-Violet | Panels on Dk Gray-Violet | figma-colors */
  --ds-violet: #AA9BCC; /* Warm Gray-Violet | Big stats and eyebrows on violet surfaces | figma-colors */
  --ds-violet-lt: #CABEE6; /* Lt Warm Gray-Violet | Testimonial surface, curve fill | figma-colors */
  --ds-violet-pl: #EDE6F8; /* Pl Warm Gray-Violet | Surface; text on Dk Gray-Violet | figma-colors */

  /* @group gray | Warm Gray | Neutrals. Dk Warm Gray is the headline ink on light surfaces and the dark title surface. */
  --ds-gray-dk: #332D2B; /* Dk Warm Gray | Dark title surface; headline ink on light | figma-colors */
  --ds-gray-md: #505050; /* Md Warm Gray | Eyebrows on Pl Warm Gray | figma-colors */
  --ds-gray: #A08780; /* Warm Gray | Secondary labels on Pl Warm Gray | figma-colors */
  --ds-gray-lt: #C5C5C5; /* Lt Warm Gray | Testimonial surface, neutral fill | figma-colors */
  --ds-gray-pl: #F0F0F0; /* Pl Warm Gray | Neutral surface | figma-colors */

  /* @group off-palette | In the frames, not in the palette | Colors the slide frames use that the Figma palette doesn't list. Either add them to Figma or replace them with palette colors. */
  --ds-paper: #ECEEE6; /* Paper | Main surface on title, statement, stat-bar and curve frames | visual-system */
  --ds-leaf: #BDDDBC; /* Leaf | Middle-phase fill on the Paper curve frame | visual-system */

  /* @group platform | Platform (current) | Values hard-coded in static/style.css today. Where they differ from the palette, the drift is noted. */
  --ds-platform-orange: #EC562C; /* Platform orange | Primary buttons, logo dots; duller than Brandura Red | platform */
  --ds-platform-orange-dark: #B64323; /* Orange dark | Hover, delete links; not in the palette | platform */
  --ds-platform-sage: #82B5A6; /* Platform green | Buttons, toggles; bluer than Olive #9EC6B1 | platform */
  --ds-platform-sage-dark: #60877C; /* Green dark | Hover on green buttons; near Md Olive | platform */
  --ds-platform-wordmark: #61756F; /* Wordmark | Logo text in the app; one step off Md Olive | platform */
  --ds-platform-login: #E0EEFF; /* Login blue | Auth pages; one step off Lt Blue | platform */
  --ds-platform-bar: #CAD8EA; /* Brand bar | Brand name pills; not in the palette | platform */
  --ds-platform-positive: #009951; /* Positive | Score change up; not in the palette | platform */
  --ds-platform-negative: #FF470B; /* Negative | Score change down; exactly Brandura Red | platform */

  /* @group font | Typefaces | Proza Libre is the brand face, as specified in Figma. Sarabun remains the platform UI face for now. */
  --ds-font-display: "Proza Libre", system-ui, sans-serif; /* Display | Brand typeface: headlines, statements, stats | figma-colors */
  --ds-font-ui: "Sarabun", system-ui, sans-serif; /* UI | Platform interface text | platform */

  /* @group radius | Radius | Corner rounding. */
  --ds-radius-sm: 6px; /* Small | Inputs, chips | platform */
  --ds-radius-md: 10px; /* Medium | Data boxes, modals | platform */
  --ds-radius-lg: 14px; /* Large | Stat bars, panels | visual-system */
  --ds-radius-pill: 999px; /* Pill | Buttons, toggles | platform */

  /* @group space | Spacing | 4px base. */
  --ds-space-1: 4px; /* 1 | Hairline gaps | platform */
  --ds-space-2: 8px; /* 2 | Tight stacks | platform */
  --ds-space-3: 12px; /* 3 | Label to content | platform */
  --ds-space-4: 20px; /* 4 | Card padding | platform */
  --ds-space-5: 32px; /* 5 | Between blocks | platform */
  --ds-space-6: 56px; /* 6 | Between sections | platform */
  --ds-space-7: 88px; /* 7 | Page margins on slides | visual-system */

  /* @group shadow | Elevation | Used sparingly; marketing surfaces are flat. */
  --ds-shadow-float: 0 12px 32px rgba(29, 29, 31, 0.12); /* Float | Product screenshots over a surface | visual-system */
  --ds-shadow-notice: 10px 0 25px 20px rgba(0, 0, 0, 0.05); /* Notice | Platform notice boxes | platform */
}

/*
 * Themes — a surface plus the colors that go with it, named after the
 * surface's palette color. Marketing patterns use only these semantic
 * variables, so any pattern can be set on any theme by adding the class.
 * Which themes a pattern is approved for is recorded with the pattern in
 * services/design_system.py.
 */
.ds-theme-paper     { --t-surface: var(--ds-paper);     --t-ink: var(--ds-black);   --t-headline: var(--ds-gray-dk); --t-eyebrow: var(--ds-olive-dk);  --t-accent: var(--ds-olive-md); --t-fill: var(--ds-leaf);      --t-label: var(--ds-olive);     --t-card: var(--ds-white);     --t-ring: rgba(255,255,255,.55); --t-rule: rgba(29,29,31,.12); }
.ds-theme-gray-pl   { --t-surface: var(--ds-gray-pl);   --t-ink: var(--ds-black);   --t-headline: var(--ds-gray-dk); --t-eyebrow: var(--ds-gray-md);   --t-accent: var(--ds-gray-md);  --t-fill: var(--ds-gray-lt);   --t-label: var(--ds-gray);      --t-card: var(--ds-white);     --t-ring: rgba(255,255,255,.7);  --t-rule: rgba(29,29,31,.12); }
.ds-theme-blue-lt   { --t-surface: var(--ds-blue-lt);   --t-ink: var(--ds-black);   --t-headline: var(--ds-gray-dk); --t-eyebrow: var(--ds-olive-dk);  --t-accent: var(--ds-olive-md); --t-fill: var(--ds-olive);     --t-label: var(--ds-olive-md);  --t-card: var(--ds-white);     --t-ring: rgba(120,160,235,.16); --t-rule: rgba(29,29,31,.12); }
.ds-theme-violet-pl { --t-surface: var(--ds-violet-pl); --t-ink: var(--ds-black);   --t-headline: var(--ds-gray-dk); --t-eyebrow: var(--ds-violet);    --t-accent: var(--ds-violet);   --t-fill: var(--ds-violet-lt); --t-label: var(--ds-violet);    --t-card: var(--ds-white);     --t-ring: rgba(150,125,210,.12); --t-rule: rgba(29,29,31,.12); }
.ds-theme-olive-lt  { --t-surface: var(--ds-olive-lt);  --t-ink: var(--ds-black);   --t-headline: var(--ds-black);   --t-eyebrow: var(--ds-olive-dk);  --t-accent: var(--ds-olive-md); --t-fill: var(--ds-olive);     --t-label: var(--ds-olive-md);  --t-card: var(--ds-white);     --t-ring: rgba(255,255,255,.5);  --t-rule: rgba(29,29,31,.12); }
.ds-theme-violet-lt { --t-surface: var(--ds-violet-lt); --t-ink: var(--ds-black);   --t-headline: var(--ds-black);   --t-eyebrow: var(--ds-violet-dk); --t-accent: var(--ds-violet-dk); --t-fill: var(--ds-violet);   --t-label: var(--ds-violet-dk); --t-card: var(--ds-white);     --t-ring: rgba(255,255,255,.35); --t-rule: rgba(29,29,31,.12); }
.ds-theme-gray-lt   { --t-surface: var(--ds-gray-lt);   --t-ink: var(--ds-black);   --t-headline: var(--ds-black);   --t-eyebrow: var(--ds-black);     --t-accent: var(--ds-black);    --t-fill: var(--ds-gray-pl);   --t-label: var(--ds-gray-md);   --t-card: var(--ds-white);     --t-ring: rgba(255,255,255,.35); --t-rule: rgba(29,29,31,.15); }
.ds-theme-gray-dk   { --t-surface: var(--ds-gray-dk);   --t-ink: var(--ds-blue-lt); --t-headline: var(--ds-blue-lt); --t-eyebrow: var(--ds-blue-lt);  --t-accent: var(--ds-olive);    --t-fill: var(--ds-gray-md);   --t-label: var(--ds-olive);     --t-card: var(--ds-gray-md);   --t-ring: rgba(0,0,0,.22);       --t-rule: rgba(255,255,255,.18); }
.ds-theme-olive-dk  { --t-surface: var(--ds-olive-dk);  --t-ink: var(--ds-olive-pl); --t-headline: var(--ds-olive-pl); --t-eyebrow: var(--ds-olive);  --t-accent: var(--ds-olive);    --t-fill: var(--ds-olive-md);  --t-label: var(--ds-olive);     --t-card: var(--ds-olive-md);  --t-ring: rgba(0,0,0,.2);        --t-rule: rgba(255,255,255,.28); }
.ds-theme-violet-dk { --t-surface: var(--ds-violet-dk); --t-ink: var(--ds-violet-pl); --t-headline: var(--ds-violet-pl); --t-eyebrow: var(--ds-violet); --t-accent: var(--ds-violet); --t-fill: var(--ds-violet-md); --t-label: var(--ds-violet);    --t-card: var(--ds-violet-md); --t-ring: rgba(0,0,0,.2);        --t-rule: rgba(255,255,255,.28); }