@charset "UTF-8";

/* ==========================================================================
   DESIGN TOKENS
   --------------------------------------------------------------------------
   PURPOSE:
   This file defines the DESIGN SYSTEM VALUES for the entire theme.
   These are raw values only — no classes, no selectors.

   Think of this as the "single source of truth" for:
   - colours
   - spacing scales
   - typography families
   - border radii
   - shadows

   WHY THIS FILE EXISTS:
   - Allows fast brand changes without touching layout or components
   - Makes migration to Gutenberg / theme.json trivial
   - Keeps design decisions separate from implementation

   RULES:
   - ONLY CSS variables (:root)
   - NO class selectors
   - NO element selectors
   - NO layout or component styles

   SAFE TO CHANGE PER CLIENT:
   - Yes (this is usually the only file you change)

   EXAMPLES OF WHAT BELONGS HERE:
   --brand-primary
   --font-heading
   --radius-lg
   --section-gap

   EXAMPLES OF WHAT DOES NOT BELONG HERE:
   .btn
   body
   .layout-section
   ========================================================================== */

:root {
  /* BRAND */
  --brand-primary:   #3fb8bc;
  --brand-secondary: #013f56;
  --brand-accent:    #97b3b4;
  --brand-white:     #ffffff;
  --brand-black:     #222222;
  --brand-header:   #f0eeed;

  /* TYPOGRAPHY */
  --font-heading: "mulish-variable", sans-serif;
  --font-body:    "nimbus-sans", sans-serif;

  /* UI */
  --text-main:  var(--brand-black);
  --text-light: #ffffff;
  --bg-body:    #ffffff;
  --bg-light:   #f2f2f2;

  /* COMPONENTS */
  --input-border: #ccc;
  --input-height: 40px;
  --btn-radius:   15px;

  /* Border radius */
  --radius-sm: 16px;
  --radius-md: 25px;
  --radius-lg: 50px;
  --radius-xl: 25px;

   /* Shadows */
  --shadow-sm: 0px 4px 13px rgb(87 88 88 / 5%);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.12);
  --shadow-lg: 0 12px 30px rgba(0,0,0,0.16);

  /* RESPONSIVE SPACING */
  --section-gap: clamp(40px, 5vw, 100px);
  --section-gap-sm: calc(var(--section-gap) / 2);

   /* LAYOUT SPACING */
  --container-gutter: 1.5rem;
  --container-gutter-mobile: 4rem;

  /* HEADER / FOOTER */
  --header-bg-gradient: linear-gradient(180deg, rgba(0,0,0,0.76) 0%, rgba(0,0,0,0) 100%);
  --header-bg: var(--brand-header);
  --footer-bg: var(--brand-accent);


  
}


@media (min-width: 992px) {
  :root {
    --radius-sm: 16px;
    --radius-md: 25px;
    --radius-lg: 50px;
    --radius-xl: 100px;
  }
}