/* ==========================================================================
   ITESIWAJU DIGITAL PLATFORM — GLOBAL DESIGN TOKENS
   Phase One of the Digital Platform Blueprint.
   Every value on this platform originates here. No page defines its own.
   ========================================================================== */

:root {
  /* ---------- Brand colour ---------- */
  --colour-brand-primary:        #0B6E4F;
  --colour-brand-primary-dark:   #08543C;
  --colour-brand-primary-deep:   #063A2A;
  --colour-brand-primary-light:  #E9F2EE;
  --colour-brand-primary-tint:   #F4F9F7;
  --colour-brand-secondary:      #FFFFFF;
  --colour-brand-accent:         #B8860B;
  --colour-brand-accent-dark:    #966D09;
  --colour-brand-accent-light:   #FBF3DF;

  /* ---------- Neutrals ---------- */
  --colour-neutral-900: #1F2A24;
  --colour-neutral-800: #33403A;
  --colour-neutral-700: #4B5A53;
  --colour-neutral-600: #64736C;
  --colour-neutral-500: #8A968F;
  --colour-neutral-400: #B4BDB8;
  --colour-neutral-300: #D6DCD9;
  --colour-neutral-200: #E7EBE9;
  --colour-neutral-100: #F2F5F4;
  --colour-neutral-050: #F8FAF9;

  /* ---------- System colour ---------- */
  --colour-success:        #1E7B4D;
  --colour-success-bg:     #E7F4ED;
  --colour-warning:        #A2691A;
  --colour-warning-bg:     #FBF0E1;
  --colour-error:          #A32330;
  --colour-error-bg:       #FBEBEC;
  --colour-info:           #1C5B84;
  --colour-info-bg:        #E8F1F7;

  /* ---------- Surface, text, border ---------- */
  --colour-background:        #FFFFFF;
  --colour-background-subtle: var(--colour-neutral-050);
  --colour-surface:           #FFFFFF;
  --colour-surface-sunken:    var(--colour-neutral-100);
  --colour-surface-brand:     var(--colour-brand-primary);
  --colour-surface-accent:    var(--colour-brand-accent-light);

  --colour-text-primary:   var(--colour-neutral-900);
  --colour-text-secondary: var(--colour-neutral-700);
  --colour-text-muted:     var(--colour-neutral-600);
  --colour-text-inverse:   #FFFFFF;
  --colour-text-link:      var(--colour-brand-primary);
  --colour-text-link-hover:var(--colour-brand-primary-dark);
  --colour-text-on-brand:  #FFFFFF;
  --colour-text-on-accent: #241905;

  --colour-border:        var(--colour-neutral-300);
  --colour-border-subtle: var(--colour-neutral-200);
  --colour-border-strong: var(--colour-neutral-400);
  --colour-border-focus:  var(--colour-brand-accent);
  --colour-border-brand:  var(--colour-brand-primary);

  /* ---------- Gradient and overlay ---------- */
  --gradient-brand:   linear-gradient(160deg, #063A2A 0%, #0B6E4F 62%, #08543C 100%);
  --gradient-overlay: linear-gradient(180deg, rgba(6,32,24,.10) 0%, rgba(6,32,24,.74) 100%);
  --overlay-dark:  rgba(6,32,24,.66);
  --overlay-brand: rgba(11,110,79,.90);

  /* ---------- Elevation ---------- */
  --shadow-none:    none;
  --shadow-subtle:  0 1px 2px rgba(16,32,26,.05), 0 2px 8px rgba(16,32,26,.05);
  --shadow-raised:  0 2px 6px rgba(16,32,26,.07), 0 10px 26px rgba(16,32,26,.09);
  --shadow-overlay: 0 8px 20px rgba(16,32,26,.12), 0 28px 64px rgba(16,32,26,.18);

  /* ---------- Spacing scale (8pt) ---------- */
  --space-0: 0;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ---------- Grid and containers ---------- */
  --grid-gutter: var(--space-6);
  --container-narrow: 46rem;
  --container-default: 72rem;
  --container-wide: 84rem;
  --page-padding: var(--space-6);

  /* ---------- Typography ---------- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --type-display: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);
  --type-h1:      clamp(2rem, 1.45rem + 2.2vw, 3rem);
  --type-h2:      clamp(1.5rem, 1.25rem + 1.05vw, 2.125rem);
  --type-h3:      clamp(1.2rem, 1.08rem + .5vw, 1.5rem);
  --type-h4:      clamp(1.0625rem, 1.02rem + .2vw, 1.1875rem);
  --type-body-lg: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  --type-body:    1rem;
  --type-body-sm: .9375rem;
  --type-label:   .8125rem;
  --type-caption: .8125rem;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.08;
  --leading-snug: 1.24;
  --leading-normal: 1.62;
  --leading-relaxed: 1.75;

  --tracking-tight: -.022em;
  --tracking-label: .09em;

  /* ---------- Shape ---------- */
  --radius-none: 0;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;
  --radius-image: 8px;

  /* ---------- Icons and buttons ---------- */
  --icon-sm: 1rem;
  --icon-md: 1.25rem;
  --icon-lg: 1.5rem;
  --button-height-sm: 2.25rem;
  --button-height-md: 2.75rem;
  --button-height-lg: 3.25rem;
  --touch-target: 44px;

  /* ---------- Motion ---------- */
  --duration-fast: 120ms;
  --duration-normal: 220ms;
  --duration-slow: 360ms;
  --ease-standard: cubic-bezier(.2,0,.2,1);
  --ease-enter: cubic-bezier(0,0,.2,1);
  --ease-exit: cubic-bezier(.4,0,1,1);

  /* ---------- Opacity ---------- */
  --opacity-disabled: .45;
  --opacity-muted: .7;
  --opacity-watermark: .06;

  /* ---------- Layout constants ---------- */
  --utility-height: 40px;
  --header-height: 76px;
  --header-height-scrolled: 62px;
  --z-header: 900;
  --z-drawer: 950;
  --z-overlay: 980;
  --z-modal: 1000;
  --z-toast: 1100;
}

/* Breakpoints, documented for developers; media queries use these literals.
   bp-xs 0 | bp-sm 480 | bp-md 768 | bp-lg 1024 | bp-xl 1280 | bp-2xl 1536 | bp-3xl 1800 */

/* ==========================================================================
   VERSION 2.0 ADDITIONS — atomic layer extensions
   ========================================================================== */
:root {
  /* Z-index scale, documented as a system rather than ad-hoc values */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 900;
  --z-drawer: 950;
  --z-overlay: 980;
  --z-modal: 1000;
  --z-toast: 1100;

  /* Image ratios */
  --ratio-wide: 16 / 9;
  --ratio-landscape: 4 / 3;
  --ratio-editorial: 3 / 2;
  --ratio-square: 1 / 1;
  --ratio-portrait: 3 / 4;
  --ratio-banner: 21 / 9;

  /* Glass surfaces, used sparingly on brand fields only */
  --glass-light: rgba(255,255,255,.10);
  --glass-border: rgba(255,255,255,.18);
  --glass-blur: saturate(160%) blur(12px);
}