/* ==========================================================================
   UAEEDC design tokens
   Single source of truth. Every colour, size and duration in the project
   resolves to something in this file. If you are about to type a raw hex
   value anywhere else, add it here first and reference the variable.
   ========================================================================== */

:root {

  /* --- Colour ------------------------------------------------------------
     Green is the council's existing brand colour and carries the identity.
     Red is the UAE flag red and appears only where the council's own marks
     put it: the emblem and the Seven Lines drawing. Not for focus rings,
     hover states or accents. It reads as national, not decorative, and
     overusing it cheapens it.
     -------------------------------------------------------------------- */

  --u-green:        #00843D;   /* council green, primary */
  --u-green-700:    #00662F;   /* pressed / hover */
  --u-green-900:    #04321A;   /* deep, for dark sections */
  --u-green-050:    #E8F2EC;   /* tint, backgrounds only */

  --u-red:          #C8102E;   /* flag red, accent only */
  --u-red-700:      #9E0C24;

  --u-ink:          #0A0F0C;   /* near black, faint green cast */
  --u-ink-70:       #454E48;   /* body copy on light */
  --u-ink-40:       #65706A;   /* captions, meta. 5.15:1 on white, 4.69:1 on mist */
  --u-line:         #DFE4E1;   /* hairlines, borders */
  --u-mist:         #F2F5F3;   /* the one light surface that is not white */
  --u-white:        #FFFFFF;

  /* White at set opacities, for text and lines on the green covers. */
  --u-white-06: rgba(255, 255, 255, .06);
  --u-white-10: rgba(255, 255, 255, .1);
  --u-white-20: rgba(255, 255, 255, .2);
  --u-white-30: rgba(255, 255, 255, .3);
  --u-white-72: rgba(255, 255, 255, .72);
  --u-white-80: rgba(255, 255, 255, .8);
  --u-white-92: rgba(255, 255, 255, .92);

  /* Semantic aliases. Prefer these in component CSS. */
  --u-bg:           var(--u-white);
  --u-bg-alt:       var(--u-mist);
  --u-bg-invert:    var(--u-green-900);
  --u-text:         var(--u-ink);
  --u-text-muted:   var(--u-ink-70);
  --u-text-invert:  var(--u-white);
  --u-accent:       var(--u-green);
  --u-accent-sharp: var(--u-red);
  --u-border:       var(--u-line);
  /* Focus rings. Green everywhere, never red: decided with the client on
     27 August 2026. Controls that sit on a green-900 surface (the hero,
     the programs cover, inverted sections) set --u-focus to the on-dark
     value so the ring still shows. */
  --u-focus:         var(--u-green);
  --u-focus-on-dark: var(--u-green-050);
  --u-text-on-alt:  var(--u-green-700);   /* green text on mist or tinted surfaces, 6.5:1 */

  /* The Seven Lines drawing (_project/blocks/seven-lines.html) is an
     Elementor HTML widget, so its seven path strokes are plain SVG
     attributes and cannot read a CSS variable without adding a <style>
     block to that widget. These are the only hex values outside this
     file, and they are the same seven colours already named above:
       #C8102E  --u-red
       #00843D  --u-green
       #DFE4E1  --u-line
       #0A0F0C  --u-ink
       #00662F  --u-green-700
       #9E0C24  --u-red-700
       #04321A  --u-green-900 */

  /* --- Type --------------------------------------------------------------
     One family. Work Sans for everything, headings included, decided with
     the client on 26 August 2026. Hierarchy comes from weight and size.
     --u-font-display is kept as an alias so older rules keep resolving.
     -------------------------------------------------------------------- */

  --u-font-body:    "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
                    Roboto, Helvetica, Arial, sans-serif;
  --u-font-display: var(--u-font-body);

  /* Fluid display sizes, fixed body sizes. */
  --u-text-display: clamp(2.75rem, 1.6rem + 4.6vw, 5.25rem);
  --u-text-h1:      clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  --u-text-h2:      clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  --u-text-h3:      clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
  --u-text-xl:      1.25rem;     /* feature and row story titles */
  --u-text-lg:      1.125rem;
  --u-text-base:    1rem;
  --u-text-sm:      0.9375rem;
  --u-text-2xs:     0.875rem;    /* card meta lines, program lists */
  --u-text-xs:      0.8125rem;

  /* Two display sizes outside the ramp: the initials shown where a photo
     is missing, and the code mark behind a programs cover. */
  --u-text-initials: 3rem;
  --u-text-mark:     20rem;

  --u-leading-tight: 1.08;
  --u-leading-snug:  1.3;
  --u-leading-body:  1.65;

  --u-tracking-tight: -0.02em;
  --u-tracking-wide:  0.08em;   /* eyebrows and small caps labels */

  --u-weight-regular: 400;
  --u-weight-medium:  500;
  --u-weight-semi:    600;

  /* --- Space -------------------------------------------------------------
     4px base. Use the scale, do not invent in-between values.
     -------------------------------------------------------------------- */

  --u-space-1:  0.25rem;
  --u-space-2:  0.5rem;
  --u-space-3:  0.75rem;
  --u-space-4:  1rem;
  --u-space-6:  1.5rem;
  --u-space-8:  2rem;
  --u-space-12: 3rem;
  --u-space-16: 4rem;
  --u-space-24: 6rem;
  --u-space-32: 8rem;

  /* Vertical rhythm between page sections. */
  --u-section-y: clamp(3rem, 1.5rem + 4vw, 6rem);   /* 48 to 96px, tightened 26 August 2026 */

  /* --- Layout ----------------------------------------------------------- */

  --u-container:      1200px;
  --u-container-wide: 1440px;
  --u-container-text: 68ch;    /* readable measure for long prose */
  --u-gutter:         clamp(1.25rem, 4vw, 3rem);

  /* --- Shape and depth -------------------------------------------------- */

  --u-radius-sm: 4px;
  --u-radius:    8px;
  --u-radius-lg: 16px;
  --u-radius-pill: 999px;

  --u-shadow-sm: 0 1px 2px rgba(10, 15, 12, 0.06);
  --u-shadow:    0 4px 16px rgba(10, 15, 12, 0.08);
  --u-shadow-lg: 0 16px 48px rgba(10, 15, 12, 0.12);

  /* Translucent green-900 (#04321A) panel behind text that sits on a photo. */
  --u-scrim:     rgba(4, 50, 26, 0.72);
  /* Soft white halo behind the hero emblem, as a drop-shadow() argument. */
  --u-glow:      0 0 48px rgba(255, 255, 255, 0.12);

  /* --- Motion ------------------------------------------------------------
     One easing curve across the whole site. Consistency here is most of
     what makes a build feel considered rather than assembled.
     -------------------------------------------------------------------- */

  --u-ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --u-ease-in:  cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --u-dur-fast: 160ms;
  --u-dur:      280ms;
  --u-dur-slow: 620ms;

  /* --- Stacking ----------------------------------------------------------
     Elementor and Astra both use z-index freely. Stay inside this range.
     -------------------------------------------------------------------- */

  --u-z-base:    1;
  --u-z-raised:  10;
  --u-z-sticky:  100;
  --u-z-overlay: 1000;
}

/* Anyone who has asked their OS to calm down gets a calm site. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --u-dur-fast: 1ms;
    --u-dur:      1ms;
    --u-dur-slow: 1ms;
  }
}