/* ==========================================================================
   GICC Digital Transformation Platform
   tokens.css — Design system foundation (colour, type, space, elevation)
   Ghana India Chamber of Commerce
   --------------------------------------------------------------------------
   Palette rationale
   -----------------
   Base            Deep institutional navy — reads as diplomatic / investment
                   agency rather than generic membership association.
   Accent          Gold — shared warmth between the Ghanaian and Indian
                   national palettes; used for CTAs and emphasis only.
   Corridor        Ghana (red / gold / green) and India (saffron / white /
                   green) flag hues, reserved EXCLUSIVELY for the bilateral
                   corridor visuals so they keep their meaning.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     1. BRAND — core
     --------------------------------------------------------------------- */
  --navy-950: #061627;
  --navy-900: #0a2036;
  --navy-850: #0d2b4d;   /* primary brand navy (from specification) */
  --navy-800: #123457;
  --navy-700: #1a4570;
  --navy-600: #235a8c;
  --navy-500: #2f74ad;
  --navy-400: #5b9ccd;
  --navy-300: #93bfe2;
  --navy-200: #c4dcf0;
  --navy-100: #e3eefa;
  --navy-050: #f2f7fc;

  --gold-900: #6b4a12;
  --gold-800: #8f651c;
  --gold-700: #b07f26;
  --gold-600: #c8912f;   /* primary accent (from specification) */
  --gold-500: #d9a63f;
  --gold-400: #e6bd68;
  --gold-300: #f0d398;
  --gold-200: #f7e6c4;
  --gold-100: #fcf4e3;

  /* ---------------------------------------------------------------------
     2. CORRIDOR — bilateral identity (restricted use)
     --------------------------------------------------------------------- */
  --gh-red:      #ce1126;
  --gh-gold:     #fcd116;
  --gh-green:    #006b3f;
  --in-saffron:  #ff9933;
  --in-white:    #ffffff;
  --in-green:    #138808;
  --in-chakra:   #0a3a8f;

  /* ---------------------------------------------------------------------
     3. NEUTRALS
     --------------------------------------------------------------------- */
  --ink-900: #0e1622;
  --ink-800: #1c2735;
  --ink-700: #33414f;
  --ink-600: #4c5b6b;
  --ink-500: #6b7a8a;
  --ink-400: #93a1af;
  --ink-300: #bfc9d3;
  --ink-200: #dde3e9;
  --ink-100: #eef1f5;
  --ink-050: #f7f9fb;
  --white:   #ffffff;

  /* ---------------------------------------------------------------------
     4. SEMANTIC
     --------------------------------------------------------------------- */
  --success-700: #146c43;
  --success-600: #1a8754;
  --success-100: #d8f3e4;
  --warning-700: #9a6700;
  --warning-600: #c48a04;
  --warning-100: #fff3cd;
  --danger-700:  #a02334;
  --danger-600:  #c8384c;
  --danger-100:  #fbe3e6;
  --info-700:    #0b5d8a;
  --info-600:    #1177ad;
  --info-100:    #dceefa;

  /* ---------------------------------------------------------------------
     5. ROLE TOKENS — the layer components actually consume
     --------------------------------------------------------------------- */
  --bg-page:        var(--white);
  --bg-subtle:      var(--ink-050);
  --bg-muted:       var(--navy-050);
  --bg-inverse:     var(--navy-850);
  --bg-inverse-alt: var(--navy-950);
  --bg-elevated:    var(--white);

  --fg-strong:   var(--navy-950);
  --fg-default:  var(--ink-800);
  --fg-muted:    var(--ink-600);
  --fg-subtle:   var(--ink-500);
  --fg-onDark:   rgba(255, 255, 255, 0.94);
  --fg-onDark-muted: rgba(255, 255, 255, 0.66);
  --fg-accent:   var(--gold-700);

  --border-subtle: var(--ink-200);
  --border-default: var(--ink-300);
  --border-strong: var(--navy-300);
  --border-onDark: rgba(255, 255, 255, 0.16);

  --action-primary:        var(--gold-600);
  --action-primary-hover:  var(--gold-500);
  --action-primary-active: var(--gold-700);
  --action-primary-fg:     var(--navy-950);

  --action-secondary:       var(--navy-850);
  --action-secondary-hover: var(--navy-800);
  --action-secondary-fg:    var(--white);

  --focus-ring: var(--gold-500);

  /* ---------------------------------------------------------------------
     6. TYPOGRAPHY
     --------------------------------------------------------------------- */
  --font-display: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system,
                  'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, -apple-system,
                  'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo,
                  Consolas, monospace;

  /* Fluid type scale — 1.200 minor third at small, 1.250 at large */
  --fs-3xs:  0.6875rem;  /* 11px  — eyebrow / micro-label            */
  --fs-2xs:  0.75rem;    /* 12px  — meta, badges                     */
  --fs-xs:   0.8125rem;  /* 13px  — captions, table cells            */
  --fs-sm:   0.875rem;   /* 14px  — secondary body, nav              */
  --fs-base: 1rem;       /* 16px  — body                             */
  --fs-md:   clamp(1.0625rem, 0.25vw + 1rem, 1.125rem);
  --fs-lg:   clamp(1.1875rem, 0.5vw + 1.05rem, 1.375rem);
  --fs-xl:   clamp(1.375rem, 0.9vw + 1.15rem, 1.75rem);
  --fs-2xl:  clamp(1.625rem, 1.5vw + 1.25rem, 2.25rem);
  --fs-3xl:  clamp(2rem, 2.4vw + 1.4rem, 3rem);
  --fs-4xl:  clamp(2.4rem, 3.6vw + 1.5rem, 4rem);
  --fs-5xl:  clamp(2.4rem, 3.1vw + 1.1rem, 4rem);

  --lh-tight:   1.08;
  --lh-snug:    1.22;
  --lh-normal:  1.45;
  --lh-relaxed: 1.65;
  --lh-loose:   1.8;

  --ls-tighter: -0.035em;
  --ls-tight:   -0.02em;
  --ls-normal:   0em;
  --ls-wide:     0.04em;
  --ls-wider:    0.10em;
  --ls-widest:   0.18em;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  /* ---------------------------------------------------------------------
     7. SPACE — 4px base
     --------------------------------------------------------------------- */
  --sp-0:  0;
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-7:  1.75rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-14: 3.5rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* Section rhythm — fluid so mobile does not become a scroll marathon */
  --section-y:      clamp(3.5rem, 7vw, 7rem);
  --section-y-lg:   clamp(4.5rem, 9vw, 9rem);
  --section-y-sm:   clamp(2.5rem, 5vw, 4.5rem);

  /* ---------------------------------------------------------------------
     8. LAYOUT
     --------------------------------------------------------------------- */
  --container:      1240px;
  --container-wide: 1440px;
  --container-text: 760px;
  --gutter:         clamp(1.125rem, 4vw, 2.5rem);
  --header-h:       84px;
  --header-h-sticky: 68px;

  /* ---------------------------------------------------------------------
     9. RADIUS
     --------------------------------------------------------------------- */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-pill: 999px;

  /* ---------------------------------------------------------------------
     10. ELEVATION — navy-tinted so shadows sit in the brand
     --------------------------------------------------------------------- */
  --sh-xs:  0 1px 2px rgba(10, 32, 54, 0.06);
  --sh-sm:  0 2px 6px rgba(10, 32, 54, 0.07), 0 1px 2px rgba(10, 32, 54, 0.05);
  --sh-md:  0 6px 18px rgba(10, 32, 54, 0.09), 0 2px 6px rgba(10, 32, 54, 0.05);
  --sh-lg:  0 16px 40px rgba(10, 32, 54, 0.12), 0 4px 12px rgba(10, 32, 54, 0.06);
  --sh-xl:  0 28px 68px rgba(10, 32, 54, 0.16), 0 8px 20px rgba(10, 32, 54, 0.07);
  --sh-gold: 0 10px 30px rgba(200, 145, 47, 0.28);
  --sh-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.08);

  /* ---------------------------------------------------------------------
     11. MOTION
     --------------------------------------------------------------------- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   420ms;
  --dur-slower: 720ms;

  /* ---------------------------------------------------------------------
     12. Z-INDEX
     --------------------------------------------------------------------- */
  --z-base:     1;
  --z-raised:   10;
  --z-sticky:   100;
  --z-header:   500;
  --z-dropdown: 600;
  --z-overlay:  800;
  --z-modal:    900;
  --z-toast:    1000;
}

/* ==========================================================================
   Dark surface context.
   Every dark surface in the system opts in here, so a component dropped
   inside one (button, card, badge, breadcrumb, input) flips its role tokens
   automatically instead of needing a bespoke "on navy" variant.
   ========================================================================== */
.on-dark {
  --bg-page:      var(--navy-850);
  --bg-subtle:    var(--navy-800);
  --bg-muted:     var(--navy-800);
  --bg-elevated:  rgba(255, 255, 255, 0.045);
  --fg-strong:    var(--white);
  --fg-default:   var(--fg-onDark);
  --fg-muted:     var(--fg-onDark-muted);
  --fg-subtle:    rgba(255, 255, 255, 0.5);
  --fg-accent:    var(--gold-400);
  --border-subtle: rgba(255, 255, 255, 0.12);
  --border-default: rgba(255, 255, 255, 0.2);
  --action-secondary:    rgba(255, 255, 255, 0.1);
  --action-secondary-fg: var(--white);
  color: var(--fg-default);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --dur-slower: 1ms;
  }
}