/* ============================================================
   Durban Oil & Gas - design tokens
   Single source of truth for color, type, space, radius, motion.
   WordPress translation: map 1:1 into theme.json custom properties.
   ============================================================ */

:root {
  /* ---- Verified brand colors (do not alter) ---- */
  --c-brand-blue:   #1091CF;
  --c-brand-orange: #F99A02;

  /* ---- Derived brand tints/shades (supporting palette) ---- */
  --c-blue-ink:     #0A648F;  /* link/text-safe blue, AA on light surfaces */
  --c-blue-deep:    #0C2D40;  /* deep structural blue for dark bands      */
  --c-blue-wash:    #E4F1F9;  /* pale blue surface wash                   */
  --c-orange-deep:  #C77A00;  /* darker orange for hover states           */
  --c-orange-wash:  #FDF1DC;  /* pale orange surface wash                 */

  /* ---- Neutrals ---- */
  --c-ink:          #131A20;  /* primary text                              */
  --c-night:        #0C1217;  /* darkest surface - hero overlay, footer    */
  --c-slate:        #55636D;  /* secondary text                            */
  --c-mist:         #9DB0BB;  /* tertiary text on dark surfaces            */
  --c-line:         #E1E6EA;  /* hairline rules on light                   */
  --c-line-strong:  #C6D0D7;  /* emphasized rules, large muted numerals    */
  --c-bg:           #F2F4F5;  /* page background (soft industrial gray)    */
  --c-card:         #FFFFFF;  /* raised surface                            */

  /* ---- Semantic ---- */
  --c-error:        #B3261E;
  --c-error-wash:   #FBEAE9;
  --c-focus:        var(--c-brand-orange);

  /* ---- Typography ---- */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale */
  --fs-display:  clamp(2.7rem, 1.2rem + 5.8vw, 5.6rem);     /* hero H1        */
  --fs-h1:       clamp(2.4rem, 1.5rem + 3.4vw, 4.2rem);     /* page titles    */
  --fs-h2:       clamp(1.9rem, 1.3rem + 2.2vw, 3.1rem);     /* section heads  */
  --fs-h3:       clamp(1.25rem, 1.1rem + 0.6vw, 1.55rem);
  --fs-h4:       1.1rem;
  --fs-lead:     clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  --fs-body:     1rem;
  --fs-small:    0.9rem;
  --fs-micro:    0.8rem;

  --lh-tight:    1.02;
  --lh-heading:  1.12;
  --lh-body:     1.6;

  --ls-display: -0.03em;
  --ls-label:    0.1em;      /* uppercase eyebrow tracking */

  /* ---- Space scale (4px base) ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-section: clamp(4.5rem, 3rem + 5vw, 8rem);      /* vertical rhythm  */
  --sp-gutter:  clamp(1.25rem, 0.7rem + 2.4vw, 3rem);  /* page side padding */

  /* ---- Layout ---- */
  --w-container: 78rem;    /* 1248px content max-width */
  --w-prose:     44rem;    /* long-form measure        */
  --header-h:    4.25rem;

  /* ---- Radius ---- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-card:  0 1px 2px rgba(12, 18, 23, 0.05), 0 16px 40px -20px rgba(12, 18, 23, 0.25);
  --shadow-float: 0 24px 60px -24px rgba(12, 18, 23, 0.45);

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:   180ms;
  --dur-med:    320ms;
  --dur-reveal: 700ms;
  --dur-slide:  1600ms;    /* hero crossfade */
}