/* =========================================================================
   Caribbean Girls Mission of Hope — Brand Colour Tokens
   Derived from CGMOH LOGO.png, tuned against the reference charity layout.
   Every text pairing below is WCAG-verified; ratios noted inline.

   THIS FILE IS THE BUILD'S SOURCE OF TRUTH FOR COLOUR AND TYPE.
   It mirrors /design/tokens.css in the project root. Change one, mirror the
   other in the same sitting, or the design system and the live site drift.

   Rule: if a hex is not in this file, it does not go on the site. Components
   reference the SEMANTIC tokens near the bottom, not the raw ramps.
   ========================================================================= */

:root {
  /* ---- CORE BRAND (straight off the logo) ------------------------------ */
  --cg-green:  #0B7A45;  /* the ring + the G — primary brand mark   */
  --cg-gold:   #F2B01E;  /* the outer ring, lettering + heart       */
  --cg-orange: #EE7B2E;  /* the warm sweep of the C                 */
  --cg-coral:  #EC6138;  /* where the C burns into red              */
  --cg-cream:  #FFF8EC;  /* page ground — warm, never clinical white*/
  --cg-ink:    #15140F;  /* text black, warmed to sit on cream      */

  /* ---- TYPE -------------------------------------------------------------
     Newsreader carries display only. Mulish carries every control, label and
     paragraph. The serif never appears in a button, nav link or form field. */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-ui:      "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    var(--font-ui);

  --h1: clamp(42px, 7vw, 104px);   /* Newsreader 600 · lh 1.02 · ls -.022em */
  --h2: clamp(30px, 4vw, 50px);    /* Newsreader 600 · lh 1.18 · ls -.018em */
  --h3: 30px;                      /* Newsreader 600                        */
  --h4: 24px;                      /* Newsreader 600                        */
  --h5: 20px;                      /* Newsreader 600 — card titles          */
  --h6: 16px;                      /* Mulish 800 — UI heading, not display  */
  --pull: clamp(22px, 2.4vw, 30px);/* Newsreader 400 italic — founder voice */

  --lh-display: 1.18;
  --lh-body:    1.75;              /* was 1.9 for Lato; Mulish needs less   */
  --measure:    68ch;

  /* Weights. Newsreader is variable — 600 is the approved display weight
     everywhere. 700 was trialled and reads chunky against Mulish's text
     colour. The only place to reconsider is a hero above ~90px, where the
     optical-size axis thins the strokes; nudge to 640 there if it looks
     light, and nowhere else.                                              */
  --w-display:  600;
  --w-hero:     580;               /* home hero only                        */
  --w-eyebrow:  400;               /* hero eyebrow                          */
  --w-pull:     400;               /* italic */
  --w-body:     400;
  --w-label:    700;
  --w-control:  800;               /* buttons, nav, H6                     */

  /* ---- GREEN — trust, growth, the Caribbean ---------------------------- */
  --green-50:  #EFF8F2;
  --green-100: #D6EFE0;
  --green-200: #ABDFC1;
  --green-300: #74C99B;
  --green-400: #3EAE76;
  --green-500: #189459;
  --green-600: #0B7A45;  /* BRAND */
  --green-700: #0A6139;
  --green-800: #084A2C;
  --green-900: #06331F;

  /* ---- GOLD — hope, warmth, the sun ------------------------------------ */
  --gold-50:  #FEF9EC;
  --gold-100: #FDF0CE;
  --gold-200: #FADF9C;
  --gold-300: #F7C95F;
  --gold-400: #F2B01E;  /* BRAND */
  --gold-500: #D99609;
  --gold-600: #B07705;
  --gold-700: #8A5C06;
  --gold-800: #63420A;
  --gold-900: #422C08;

  /* ---- ORANGE — energy, movement, welcome ------------------------------ */
  --orange-50:  #FEF4EC;
  --orange-100: #FCE5D2;
  --orange-200: #F9C7A3;
  --orange-300: #F5A26B;
  --orange-400: #EE7B2E;  /* BRAND */
  --orange-500: #D9611A;
  --orange-600: #B44B13;
  --orange-700: #8E3A11;
  --orange-800: #682B0F;
  --orange-900: #451C0A;

  /* ---- CORAL — urgency, the ask ----------------------------------------
     Anchored on #EC6138. Note the rule: this coral takes INK, never white.
     White on #EC6138 is 3.32:1 and fails AA; ink is 5.56:1 and passes.     */
  --coral-50:  #FAF4F2;
  --coral-100: #F6E3DD;
  --coral-200: #F2C3B5;
  --coral-300: #F3987D;
  --coral-400: #EC6138;  /* BRAND — fills only, with ink text */
  --coral-500: #E94819;  /* hover on the fill                 */
  --coral-600: #C43B13;  /* coral TEXT on light grounds       */
  --coral-700: #9C2F0F;  /* coral text on tinted grounds      */
  --coral-800: #74230B;
  --coral-900: #4F1808;

  /* ---- SAND — warm neutrals, tuned to the cream ground ----------------- */
  --sand-50:  #FFFCF6;
  --sand-100: #FFF8EC;
  --sand-200: #F4EEE1;
  --sand-300: #E3DCCE;
  --sand-400: #BDB6A8;
  --sand-500: #8C8779;
  --sand-600: #645F55;
  --sand-700: #413E37;
  --sand-800: #28261F;
  --sand-900: #15140F;

  /* =======================================================================
     SEMANTIC TOKENS — use these in components, not the raw ramps above.
     ======================================================================= */

  /* Surfaces */
  --bg-page:        #FFFFFF;          /* white, the default site canvas    */
  --bg-raised:      #FFFFFF;          /* cards lift off the cream         */
  --bg-sunken:      var(--sand-200);  /* alternating bands                */
  --bg-inverse:     var(--green-800); /* footer, dark hero, stat bands    */
  --bg-inverse-alt: var(--green-900);
  --bg-accent-soft: var(--green-50);
  --bg-warm-soft:   var(--gold-50);
  --bg-nav:         #FFFFFF;          /* clean, high-trust site header    */

  /* Text */
  --text-primary:   var(--sand-800);  /* 14.34:1 on cream — AAA           */
  --text-secondary: var(--sand-700);  /* 10.10:1 on cream — AAA           */
  --text-muted:     var(--sand-600);  /*  6.01:1 on cream — AA            */
  --text-on-dark:   #FFFFFF;          /* 10.36:1 on green-800 — AAA       */
  --text-on-dark-muted: var(--green-200);
  --text-link:      var(--green-700); /*  7.15:1 on cream — AAA           */
  --text-link-hover:var(--green-800);
  --text-accent:    var(--gold-300);  /*  6.65:1 on green-800 — AA        */
  --text-nav:       var(--green-800); /* 10.36:1 on white — AAA           */
  --text-nav-muted: var(--green-700); /*  7.55:1 on white — AAA           */

  /* Lines */
  --border-subtle:  var(--sand-300);  /* hairlines, dividers              */
  --border-default: var(--sand-400);
  --border-strong:  var(--green-600);
  --focus-ring:     var(--green-600); /*  5.41:1 on white — AA non-text   */

  /* Actions
     NOTE: the primary CTA is GOLD with ink text (9.66:1) — it outperforms
     the usual white-on-orange charity button, which fails AA at 2.80:1. */
  --cta-primary-bg:       var(--gold-400);
  --cta-primary-text:     var(--green-900);   /* 9.66:1 */
  --cta-primary-bg-hover: var(--gold-500);

  --cta-donate-bg:        var(--gold-400);    /* #F2B01E            */
  --cta-donate-text:      var(--sand-900);    /* 9.66:1 AAA          */
  --cta-donate-bg-hover:  var(--gold-500);    /* 7.30:1 AAA          */

  --cta-secondary-bg:     transparent;
  --cta-secondary-text:   var(--green-700);
  --cta-secondary-border: var(--green-600);

  /* Coral used as TEXT never uses the brand step — it is too light.
     Meta labels, soft-button text and inline coral all take --coral-600. */
  --text-coral:           var(--coral-600);   /* 5.27:1 on white    */
  --text-coral-tinted:    var(--coral-700);   /* on coral-50/100    */

  /* Programme colour-coding — one hue per pillar */
  --prog-shelter:   var(--green-600);  /* Emergency Support & Safe Housing */
  --prog-orphanage: var(--gold-500);   /* Orphanage Support                */
  --prog-food:      var(--orange-500); /* Food & Basic Necessities         */
  --prog-education: var(--coral-600);  /* Education Support                */

  /* Signature gradient — the logo's C, sweeping green→gold→coral */
  --grad-brand: linear-gradient(100deg, #0B7A45 0%, #189459 22%, #F2B01E 62%, #EE7B2E 82%, #EC6138 100%);
  --grad-warm:  linear-gradient(135deg, #F2B01E 0%, #EE7B2E 55%, #EC6138 100%);
  --grad-deep:  linear-gradient(160deg, #0A6139 0%, #06331F 100%);
}

/* Optional dark treatment for inverse sections ---------------------------- */
.on-dark {
  --bg-page:        var(--green-900);
  --bg-raised:      var(--green-800);
  --text-primary:   #FFFFFF;
  --text-secondary: var(--green-100);
  --text-muted:     var(--green-200);
  --text-link:      var(--gold-300);
  --border-subtle:  rgba(255, 255, 255, .14);
}

/* =========================================================================
   SPACE, SHAPE, DEPTH, MOTION
   Added for the build. The palette above came from the design system as-is;
   everything below encodes sections 4, 5 and 6 of DESIGN.md so components
   never invent a radius or a shadow.
   ========================================================================= */

:root {
  /* ---- Containers ------------------------------------------------------ */
  --container:        1320px;  /* standard page width                       */
  --container-narrow: 1000px;  /* policies, long-form copy                  */
  --container-wide:   1550px;  /* gallery, full-bleed bands                 */

  /* ---- Spacing scale. Nothing off-scale. ------------------------------- */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   80px;
  --s-10:  120px;

  --section-y:        var(--s-10);  /* 120px desktop                        */
  --section-y-mobile: var(--s-8);   /*  64px below 1000px                   */

  /* ---- Radii. Interactive is a pill, containers are 20px, inputs 12px. -- */
  --r-pill: 999px;
  --r-lg:   30px;   /* inset section bands   */
  --r-md:   20px;   /* cards, accordion rows */
  --r-sm:   12px;   /* inputs, nav pill      */
  --r-xs:   8px;    /* amount chips          */

  /* ---- Shadows are tinted green. A grey shadow goes muddy on cream. ----- */
  --shadow-sm: 0 1px 3px rgba(18, 53, 40, .07);   /* resting */
  --shadow-md: 0 8px 30px rgba(18, 53, 40, .09);  /* hover   */
  --shadow-lg: 0 20px 60px rgba(18, 53, 40, .14); /* overlay */

  /* ---- Motion. Confirms an interaction the visitor started, nothing else. */
  --ease:   cubic-bezier(.4, 0, .2, 1);
  --t-fast: .2s;
  --t-base: .25s;
  --t-slow: .3s;

  /* ---- Aliases -----------------------------------------------------------
     The design system prototype (design/design-system.html) names a few
     tokens differently. Kept here so any component lifted out of that file
     drops into the theme without a find-and-replace. */
  --font-head:   var(--font-ui);
  --heading:     var(--green-800);
  --body:        var(--text-primary);
  --brand:       var(--green-600);
  --brand-deep:  var(--green-800);
  --accent:      var(--gold-400);
  --spark:       var(--orange-400);
  --action:      var(--gold-400);    /* the donate fill, ink text  */
  --action-deep: var(--coral-600);   /* coral TEXT on light ground */

  /* ---- Layering ---------------------------------------------------------
     Divi's own z-indexes run high. These sit deliberately below the builder
     chrome and above page content. */
  --z-raised:  10;
  --z-sticky:  100;
  --z-overlay: 1000;
}

/* Below 1000px the section rhythm halves. Declared once, here, so no
   component has to restate it. */
@media (max-width: 1000px) {
  :root { --section-y: var(--section-y-mobile); }
}