/* ==========================================================================
   Synthete brand tokens — derived from reference/SYNTHETE_Brand_Kit.pptx
   ========================================================================== */

:root {
  /* --- Color palette ----------------------------------------------------- */
  --color-primary: #17996d;       /* Emerald Teal */
  --color-secondary: #1a565e;     /* Deep Petrol */
  --color-accent: #4f9e5c;        /* Moss Green */
  --color-dark: #1a2744;          /* Navy Charcoal */
  --color-bg: #f0f7f4;            /* Mint White */

  /* Extended palette */
  --color-ext-1: #d4ede4;
  --color-ext-2: #e8edeb;
  --color-ext-3: #6b7b8d;
  --color-ext-4: #b8d4cb;

  /* Semantic aliases */
  --color-surface: #ffffff;
  --color-text: var(--color-dark);
  --color-text-muted: var(--color-ext-3);
  --color-border: var(--color-ext-2);
  --color-on-dark: #ffffff;
  --color-on-dark-muted: var(--color-ext-4);

  /* --- Typography ---------------------------------------------------------
     Brand kit specifies Trebuchet MS (heading) / Calibri (body). Neither is
     a web font, so we ship safe cross-platform stacks that land on the
     closest match. */
  --font-heading: "Trebuchet MS", "Trebuchet", "Helvetica Neue", Verdana, sans-serif;
  --font-body: Calibri, Candara, "Segoe UI", Optima, "Helvetica Neue", sans-serif;

  --fs-title: clamp(2rem, 1.4rem + 2.5vw, 2.75rem);       /* 36-44pt */
  --fs-subtitle: clamp(1.25rem, 1.05rem + 0.8vw, 1.5rem); /* 20-24pt */
  --fs-body: 1rem;                                        /* 14-16pt */
  --fs-caption: 0.75rem;                                   /* 10-12pt */

  /* --- Spacing / layout ---------------------------------------------------- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  --section-margin: 0.5in; /* brand kit: 0.5" minimum margins */
  --content-max-width: 1120px;

  --radius-sm: 6px;
  --radius-md: 12px;

  /* --- Visual motifs -------------------------------------------------------
     From the brand kit's "Visual Language" slide. */
  --accent-bar-width: 4px;
  --accent-line-height: 3px;

  --shadow-card: 0 4px 16px rgba(26, 39, 68, 0.08);
  --shadow-card-hover: 0 8px 24px rgba(26, 39, 68, 0.12);
}