/**
 * Copyright (c) 2026 SEVEN TWENTY DEGREES (Pty) Ltd
 * Registration No: 2023/212025/07
 * All rights reserved.
 *
 * This software is the proprietary and confidential information of
 * SEVEN TWENTY DEGREES (Pty) Ltd. Unauthorized
 * copying, modification, distribution, or use is strictly prohibited.
 */

/* =========================================================================
   DESIGN TOKENS — 720 Degrees
   Single source of truth for colour, type, spacing, motion.
   Edit values here; do not hard-code elsewhere.
   ========================================================================= */

:root {
  /* ---- Colour: neutrals ------------------------------------------------ */
  --color-paper:        #F7F4EE;  /* bone white — primary background       */
  --color-paper-alt:    #EFEAE0;  /* slightly deeper cream — section bg    */
  --color-paper-deep:   #E6E0D0;  /* deeper cream — product tiles          */
  --color-ink:          #1A1A1A;  /* body text                              */
  --color-ink-soft:     #3A3A36;  /* sub-heading text                       */
  --color-muted:        #6B6B66;  /* metadata, captions, helper             */
  --color-rule:         #D9D3C5;  /* hairline borders                       */
  --color-rule-soft:    #EDE6D6;  /* low-contrast dividers                  */

  /* ---- Colour: brand --------------------------------------------------- */
  --color-primary:      #8B2E1F;  /* heritage charred red — primary brand   */
  --color-primary-deep: #6A2316;  /* pressed / active                        */
  --color-primary-soft: #F2D9D2;  /* tint background                         */

  /* ---- Colour: semantic ------------------------------------------------ */
  --color-severity-high: #B3261E; /* outbreak / urgent                      */
  --color-severity-med:  #C77A1B; /* watch                                   */
  --color-severity-low:  #6E7E5C; /* routine / sage                          */
  --color-innovation:    #6E7E5C; /* small-farmer innovation accent          */
  --color-accent:        #D9A441; /* AI-reporter highlight (saffron)         */
  --color-accent-soft:   #F5E6C3;

  /* ---- Typography: families ------------------------------------------- */
  --font-serif:  "Fraunces", "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:   "JetBrains Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* ---- Typography: fluid scale (clamp-based) --------------------------- */
  --fs-xs:       clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --fs-sm:       clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);
  --fs-base:     clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-md:       clamp(1.125rem, 1.08rem + 0.25vw, 1.25rem);
  --fs-lg:       clamp(1.25rem, 1.18rem + 0.4vw, 1.5rem);
  --fs-xl:       clamp(1.5rem, 1.35rem + 0.8vw, 2rem);
  --fs-2xl:      clamp(2rem, 1.75rem + 1.4vw, 2.75rem);
  --fs-3xl:      clamp(2.5rem, 2rem + 2.6vw, 4rem);
  --fs-4xl:      clamp(3rem, 2.3rem + 3.6vw, 5.5rem);

  /* ---- Typography: weights & leading ---------------------------------- */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight:    1.1;
  --lh-snug:     1.25;
  --lh-base:     1.55;
  --lh-loose:    1.75;

  /* Editorial reading measure for articles & About prose */
  --measure-article: 65ch;
  --measure-wide:    75ch;

  /* ---- Spacing scale (1rem = 16px baseline) --------------------------- */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.5rem;
  --space-6:   2rem;
  --space-7:   3rem;
  --space-8:   4rem;
  --space-9:   6rem;
  --space-10:  8rem;

  /* ---- Layout --------------------------------------------------------- */
  --container-wide:  1200px;
  --container-read:  860px;
  --gutter:          clamp(1rem, 4vw, 2.5rem);
  --radius-sm:       2px;
  --radius-md:       4px;
  --radius-lg:       8px;

  /* ---- Motion --------------------------------------------------------- */
  --ease-out:   cubic-bezier(0.2, 0, 0, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --dur-quick:  140ms;
  --dur-base:   220ms;

  /* ---- Elevation ------------------------------------------------------ */
  --shadow-sm: 0 1px 2px rgba(20, 20, 20, 0.06);
  --shadow-md: 0 6px 20px rgba(20, 20, 20, 0.08);
  --shadow-lg: 0 18px 40px rgba(20, 20, 20, 0.10);

  /* ---- Header height (used by anchor-offset etc.) --------------------- */
  --header-h:  72px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-quick: 0ms;
    --dur-base:  0ms;
  }
}