/* ============================================================
   TOKENS.CSS — Design System
   imostatecea.ng | Office of the Chief Economic Adviser
   ============================================================ */

:root {
  /* ── COLOUR ── */
  --color-primary:          #1a5c2e;   /* Imo green — growth, Nigeria */
  --color-primary-hover:    #236b38;
  --color-primary-light:    #2d7a45;
  --color-primary-pale:     #e8f5ed;

  --color-cobalt:           #0047ab;   /* Cobalt — authority, government */
  --color-cobalt-mid:       #0059d4;
  --color-cobalt-dark:      #003080;
  --color-cobalt-deeper:    #00204d;

  --color-gold:             #c8972a;   /* Gold — prestige, warmth */
  --color-gold-light:       #f0c84a;
  --color-gold-pale:        #fdf4de;

  --color-white:            #ffffff;
  --color-off-white:        #f8f6f1;   /* breathing room */
  --color-surface:          #ffffff;
  --color-surface-raised:   #f8f6f1;

  --color-text-primary:     #1a1a1a;
  --color-text-secondary:   #3d3d3d;
  --color-text-muted:       #5c5c5c;
  --color-text-inverse:     #ffffff;

  --color-border:           #e0ddd6;
  --color-border-subtle:    #ece9e3;

  --color-error:            #c0392b;
  --color-success:          #1a5c2e;

  /* ── TYPOGRAPHY ── */
  --font-display: 'Roboto', system-ui, sans-serif;
  --font-body:    'Open Sans', system-ui, sans-serif;

  /* ── TYPE SCALE (fluid) ── */
  --text-xs:   clamp(0.75rem,  1vw,   0.75rem);
  --text-sm:   clamp(0.875rem, 1.2vw, 0.875rem);
  --text-base: clamp(1rem,     1.4vw, 1rem);
  --text-md:   clamp(1.05rem,  1.6vw, 1.1rem);
  --text-lg:   clamp(1.2rem,   2vw,   1.35rem);
  --text-xl:   clamp(1.55rem,  2.5vw, 2rem);
  --text-2xl:  clamp(1.9rem,   3vw,   2.5rem);
  --text-3xl:  clamp(2.2rem,   3.5vw, 3rem);
  --text-hero: clamp(2.6rem,   5vw,   4.5rem);

  /* ── SPACING ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.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;

  /* ── LAYOUT ── */
  --container-max:    1200px;
  --container-narrow: 768px;
  --container-wide:   1380px;
  --nav-height:       72px;

  /* ── BORDER RADIUS ── */
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ── SHADOWS ── */
  --shadow-sm: 0 1px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 24px rgba(0,0,0,0.09);
  --shadow-lg: 0 12px 48px rgba(0,0,0,0.13);
  --shadow-xl: 0 24px 80px rgba(0,0,0,0.18);

  /* ── TRANSITIONS ── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:          cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Z-INDEX ── */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:   10;
  --z-overlay:  100;
  --z-nav:      200;
  --z-modal:    300;
}