/* ============================================================
   PAKAI LABS — DESIGN TOKENS  v2.0  (Light Theme)
   tokens.css
   Single source of truth for all visual values.
   Import this as the FIRST stylesheet on every HTML page.
   ============================================================ */

/* ------------------------------------------------------------
   1. FONT IMPORTS
   Space Grotesk → headings, section titles, stat numbers, logo text
   DM Sans   → body text, nav links, buttons, inputs, captions
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');


/* ------------------------------------------------------------
   2. ROOT TOKENS
   ------------------------------------------------------------ */
:root {

  /* ----------------------------------------------------------
     2.1  BRAND PALETTE — raw values
     ---------------------------------------------------------- */

  /* Primary — Navy Blue */
  --color-primary:       #092A6E;
  --color-primary-light: #1a3f8f;   /* hover / lighter shade   */
  --color-primary-dark:  #061d50;   /* active / pressed shade   */
  --color-primary-faint: #EEF2FB;   /* tinted bg on light pages */
  --color-primary-soft:  #C8D4F0;   /* border / divider on white */

  /* Secondary — Deep Teal */
  --color-secondary:       #1C4B53;
  --color-secondary-light: #265f6a;
  --color-secondary-dark:  #133740;
  --color-secondary-faint: #EAF4F5;
  --color-secondary-soft:  #B5D8DD;

  /* Accent — Burnt Orange */
  --color-accent:       #E46420;
  --color-accent-light: #f07a3a;
  --color-accent-dark:  #c0521a;
  --color-accent-faint: #FDF0E8;
  --color-accent-soft:  #F5C49A;

  /* White */
  --color-white: #FFFFFF;


  /* ----------------------------------------------------------
     2.2  GRAY SCALE  (neutral, no blue tint)
     ---------------------------------------------------------- */
  --color-gray-50:  #F8F9FA;   /* page / section background    */
  --color-gray-100: #F1F3F6;   /* alternate section background */
  --color-gray-200: #E2E6ED;   /* card borders, dividers       */
  --color-gray-300: #C8CDD8;   /* input borders                */
  --color-gray-400: #9AA3B4;   /* placeholder text             */
  --color-gray-500: #6B7486;   /* secondary label text         */
  --color-gray-600: #4A5268;   /* muted body text              */
  --color-gray-700: #333A50;   /* strong secondary text        */
  --color-gray-800: #1E2333;   /* near-heading dark text       */
  --color-gray-900: #0F1320;   /* highest contrast body text   */


  /* ----------------------------------------------------------
     2.3  SEMANTIC COLOR TOKENS
     Use these in all components — never the raw palette above.
     ---------------------------------------------------------- */

  /* --- Text --- */
  --color-text-heading:     var(--color-primary);        /* h1–h3                    */
  --color-text-subheading:  var(--color-secondary);      /* h4–h6, section eyebrows  */
  --color-text-body:        var(--color-gray-800);       /* paragraphs, list items   */
  --color-text-muted:       var(--color-gray-600);       /* captions, helper text    */
  --color-text-hint:        var(--color-gray-400);       /* placeholder, disabled    */
  --color-text-accent:      var(--color-accent);         /* highlighted inline text  */
  --color-text-link:        var(--color-secondary);      /* anchor default           */
  --color-text-link-hover:  var(--color-accent);         /* anchor hover             */
  /* Text on primary-navy backgrounds (footer, dark cards) */
  --color-text-on-primary:       var(--color-white);
  --color-text-on-primary-muted: var(--color-primary-soft);

  /* --- Backgrounds --- */
  --color-bg-page:      var(--color-white);         /* main page background         */
  --color-bg-subtle:    var(--color-gray-50);        /* hero, alternate sections     */
  --color-bg-alt:       var(--color-gray-100);       /* every-other section          */
  --color-bg-card:      var(--color-white);          /* card surface                 */
  --color-bg-input:     var(--color-white);          /* form field background        */
  --color-bg-faint-primary:   var(--color-primary-faint);  /* tinted highlight block */
  --color-bg-faint-teal:      var(--color-secondary-faint);/* tinted teal block      */
  --color-bg-faint-accent:    var(--color-accent-faint);   /* tinted orange block    */

  /* Primary navy — used for footer, dark nav variant, dark CTA bands */
  --color-bg-primary:         var(--color-primary);
  --color-bg-primary-deep:    var(--color-primary-dark);

  /* --- Borders --- */
  --color-border-default:  var(--color-gray-200);
  --color-border-light:    var(--color-gray-100);
  --color-border-strong:   var(--color-gray-300);
  --color-border-focus:    var(--color-primary);
  --color-border-accent:   var(--color-accent);
  /* On primary-navy surfaces */
  --color-border-on-primary: rgba(255, 255, 255, 0.15);

  /* --- Buttons --- */
  --color-btn-primary-bg:          var(--color-primary);
  --color-btn-primary-text:        var(--color-white);
  --color-btn-primary-hover-bg:    var(--color-primary-light);

  --color-btn-accent-bg:           var(--color-accent);
  --color-btn-accent-text:         var(--color-white);
  --color-btn-accent-hover-bg:     var(--color-accent-light);

  --color-btn-outline-border:      var(--color-primary);
  --color-btn-outline-text:        var(--color-primary);
  --color-btn-outline-hover-bg:    var(--color-primary);
  --color-btn-outline-hover-text:  var(--color-white);

  /* Outline button on navy backgrounds */
  --color-btn-outline-inv-border:     rgba(255, 255, 255, 0.6);
  --color-btn-outline-inv-text:       var(--color-white);
  --color-btn-outline-inv-hover-bg:   var(--color-white);
  --color-btn-outline-inv-hover-text: var(--color-primary);

  /* --- Badges / Pills --- */
  --color-badge-primary-bg:    var(--color-primary-faint);
  --color-badge-primary-text:  var(--color-primary);
  --color-badge-teal-bg:       var(--color-secondary-faint);
  --color-badge-teal-text:     var(--color-secondary-dark);
  --color-badge-accent-bg:     var(--color-accent-faint);
  --color-badge-accent-text:   var(--color-accent-dark);
  --color-badge-neutral-bg:    var(--color-gray-100);
  --color-badge-neutral-text:  var(--color-gray-700);

  /* --- Status / Semantic --- */
  --color-success:     #166534;
  --color-success-bg:  #dcfce7;
  --color-warning:     #92400e;
  --color-warning-bg:  #fef3c7;
  --color-error:       #991b1b;
  --color-error-bg:    #fee2e2;
  --color-info:        var(--color-secondary);
  --color-info-bg:     var(--color-secondary-faint);


  /* ----------------------------------------------------------
     2.4  TYPOGRAPHY
     ---------------------------------------------------------- */
  --font-heading: 'Space Grotesk', 'Segoe UI', Arial, sans-serif;
  --font-body:    'DM Sans', 'Segoe UI', Arial, sans-serif;
  --font-mono:    'Courier New', Courier, monospace;

  /* Font Sizes */
  --fs-xs:   11px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   17px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  30px;
  --fs-3xl:  38px;
  --fs-4xl:  48px;
  --fs-5xl:  60px;

  /* Font Weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Line Heights */
  --lh-none:    1;
  --lh-tight:   1.2;
  --lh-snug:    1.4;
  --lh-base:    1.6;
  --lh-relaxed: 1.75;
  --lh-loose:   2;

  /* Letter Spacing */
  --ls-tight:   -0.02em;
  --ls-normal:   0em;
  --ls-wide:     0.04em;
  --ls-wider:    0.08em;
  --ls-widest:   0.16em;


  /* ----------------------------------------------------------
     2.5  SPACING  (4px base unit)
     ---------------------------------------------------------- */
  --space-0:  0px;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;


  /* ----------------------------------------------------------
     2.6  LAYOUT
     ---------------------------------------------------------- */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1200px;
  --container-2xl: 1400px;

  --section-padding-y: var(--space-20);   /* 80px */
  --section-padding-x: var(--space-6);    /* 24px */


  /* ----------------------------------------------------------
     2.7  BORDER RADIUS
     ---------------------------------------------------------- */
  --radius-none: 0px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 999px;


  /* ----------------------------------------------------------
     2.8  BORDERS
     ---------------------------------------------------------- */
  --border-thin:    0.5px solid var(--color-border-default);
  --border-default:   1px solid var(--color-border-default);
  --border-strong:    1px solid var(--color-border-strong);
  --border-accent:    2px solid var(--color-accent);
  --border-primary:   2px solid var(--color-primary);
  --border-on-primary: 1px solid var(--color-border-on-primary);


  /* ----------------------------------------------------------
     2.9  SHADOWS  (navy-tinted — matches brand palette)
     ---------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(9, 42, 110, 0.06);
  --shadow-sm: 0 1px 4px rgba(9, 42, 110, 0.08),
               0 1px 2px rgba(9, 42, 110, 0.04);
  --shadow-md: 0 4px 14px rgba(9, 42, 110, 0.10),
               0 2px 4px  rgba(9, 42, 110, 0.06);
  --shadow-lg: 0 8px 30px rgba(9, 42, 110, 0.14),
               0 4px 8px  rgba(9, 42, 110, 0.06);
  --shadow-xl: 0 16px 48px rgba(9, 42, 110, 0.18);

  /* Focus ring — navy */
  --focus-ring:        0 0 0 3px rgba(9, 42, 110, 0.22);
  --focus-ring-accent: 0 0 0 3px rgba(228, 100, 32, 0.22);


  /* ----------------------------------------------------------
     2.10  TRANSITIONS
     ---------------------------------------------------------- */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);


  /* ----------------------------------------------------------
     2.11  Z-INDEX
     ---------------------------------------------------------- */
  --z-below:    -1;
  --z-base:      1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;


  /* ----------------------------------------------------------
     2.12  ICON SIZES
     ---------------------------------------------------------- */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;

} /* end :root */


/* ============================================================
   3. GLOBAL RESETS & BASE
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

html {
  scroll-behavior:      smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family:              var(--font-body);
  font-size:                var(--fs-base);
  font-weight:              var(--fw-regular);
  line-height:              var(--lh-relaxed);
  color:                    var(--color-text-body);
  background-color:         var(--color-bg-page);
  -webkit-font-smoothing:   antialiased;
  -moz-osx-font-smoothing:  grayscale;
}

img, video, svg { display: block; max-width: 100%; }

a {
  color:           var(--color-text-link);
  text-decoration: none;
  transition:      color var(--transition-fast);
}
a:hover { color: var(--color-text-link-hover); }


/* ============================================================
   4. TYPOGRAPHY SYSTEM
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family:    var(--font-heading);
  color:          var(--color-text-heading);
  line-height:    var(--lh-tight);
  font-weight:    var(--fw-semibold);
  letter-spacing: var(--ls-tight);
}

h1 { font-size: var(--fs-4xl); font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl);  color: var(--color-text-subheading); }
h5 { font-size: var(--fs-lg);  color: var(--color-text-subheading); }
h6 { font-size: var(--fs-md);  color: var(--color-text-subheading); letter-spacing: var(--ls-wide); }

p {
  font-size:   var(--fs-base);
  line-height: var(--lh-relaxed);
  color:       var(--color-text-body);
  max-width:   68ch;
}

/* Eyebrow / section label */
.label-eyebrow {
  font-family:    var(--font-body);
  font-size:      var(--fs-xs);
  font-weight:    var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color:          var(--color-text-accent);
  display:        block;
}

/* Lead paragraph */
.text-lead {
  font-size:   var(--fs-md);
  line-height: var(--lh-relaxed);
  color:       var(--color-text-muted);
  font-weight: var(--fw-light);
}

/* Utility text colour helpers */
.text-primary   { color: var(--color-primary);   }
.text-secondary { color: var(--color-secondary);  }
.text-accent    { color: var(--color-accent);     }
.text-muted     { color: var(--color-text-muted); }
/* For use inside navy backgrounds */
.text-on-primary       { color: var(--color-text-on-primary);       }
.text-on-primary-muted { color: var(--color-text-on-primary-muted); }


/* ============================================================
   5. LAYOUT UTILITIES
   ============================================================ */

.container {
  width:          100%;
  max-width:      var(--container-xl);
  margin-inline:  auto;
  padding-inline: var(--section-padding-x);
}

.container-lg  { max-width: var(--container-lg);  }
.container-2xl { max-width: var(--container-2xl); }

/* Light section (default — white background) */
.section {
  padding-block: var(--section-padding-y);
  background:    var(--color-bg-page);
}

/* Alternate section — light gray */
.section-alt {
  background: var(--color-bg-subtle);
}

/* Second alternate — slightly different gray */
.section-alt-2 {
  background: var(--color-bg-alt);
}

/* Primary-navy section — footer, CTA bands, dark cards */
.section-primary {
  background: var(--color-bg-primary);
}

/* Faint-primary tinted band */
.section-tinted {
  background: var(--color-bg-faint-primary);
}

/* Text overrides inside navy sections */
.section-primary h1,
.section-primary h2,
.section-primary h3,
.section-primary h4,
.section-primary h5,
.section-primary h6 {
  color: var(--color-text-on-primary);
}

.section-primary p,
.section-primary li {
  color: var(--color-text-on-primary-muted);
}

.section-primary a {
  color: var(--color-text-on-primary-muted);
}

.section-primary a:hover {
  color: var(--color-accent);
}


/* ============================================================
   6. COMPONENT BASE TOKENS
   ============================================================ */

/* --- BUTTONS ----------------------------------------------- */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-2);
  font-family:     var(--font-body);
  font-size:       var(--fs-sm);
  font-weight:     var(--fw-semibold);
  letter-spacing:  var(--ls-wide);
  border-radius:   var(--radius-pill);
  padding:         var(--space-3) var(--space-6);
  border:          1px solid transparent;
  cursor:          pointer;
  white-space:     nowrap;
  text-decoration: none;
  transition:
    background   var(--transition-fast),
    color        var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow   var(--transition-fast),
    transform    var(--transition-fast);
}

.btn:focus-visible {
  outline:    none;
  box-shadow: var(--focus-ring);
}

.btn:active { transform: scale(0.98); }

/* Filled — Navy */
.btn-primary {
  background:   var(--color-btn-primary-bg);
  color:        var(--color-btn-primary-text);
  border-color: var(--color-btn-primary-bg);
}
.btn-primary:hover {
  background:   var(--color-btn-primary-hover-bg);
  border-color: var(--color-btn-primary-hover-bg);
  box-shadow:   var(--shadow-md);
  color:        var(--color-btn-primary-text);
}

/* Filled — Orange Accent */
.btn-accent {
  background:   var(--color-btn-accent-bg);
  color:        var(--color-btn-accent-text);
  border-color: var(--color-btn-accent-bg);
}
.btn-accent:hover {
  background:   var(--color-btn-accent-hover-bg);
  border-color: var(--color-btn-accent-hover-bg);
  box-shadow:   var(--shadow-md);
  color:        var(--color-btn-accent-text);
}

/* Outline — Navy (on white/light backgrounds) */
.btn-outline {
  background:   transparent;
  color:        var(--color-btn-outline-text);
  border-color: var(--color-btn-outline-border);
}
.btn-outline:hover {
  background:   var(--color-btn-outline-hover-bg);
  color:        var(--color-btn-outline-hover-text);
  border-color: var(--color-btn-outline-hover-bg);
  box-shadow:   var(--shadow-sm);
}

/* Outline — Inverse (on navy backgrounds like footer) */
.btn-outline-inv {
  background:   transparent;
  color:        var(--color-btn-outline-inv-text);
  border-color: var(--color-btn-outline-inv-border);
}
.btn-outline-inv:hover {
  background:   var(--color-btn-outline-inv-hover-bg);
  color:        var(--color-btn-outline-inv-hover-text);
  border-color: var(--color-btn-outline-inv-hover-bg);
}

/* Sizes */
.btn-lg { font-size: var(--fs-base); padding: var(--space-4) var(--space-8); }
.btn-sm { font-size: var(--fs-xs);   padding: var(--space-2) var(--space-4); }


/* --- CARDS -------------------------------------------------- */
.card {
  background:    var(--color-bg-card);
  border-radius: var(--radius-lg);
  border:        var(--border-default);
  padding:       var(--space-6);
  box-shadow:    var(--shadow-sm);
  transition:
    box-shadow var(--transition-base),
    transform  var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform:  translateY(-2px);
}

/* Card on a navy background */
.card-on-primary {
  background:    rgba(255, 255, 255, 0.08);
  border:        1px solid var(--color-border-on-primary);
  border-radius: var(--radius-lg);
  padding:       var(--space-6);
}

.card-on-primary h3,
.card-on-primary h4 {
  color: var(--color-text-on-primary);
}

.card-on-primary p {
  color: var(--color-text-on-primary-muted);
}

/* Tinted faint primary card */
.card-tinted {
  background:    var(--color-bg-faint-primary);
  border:        1px solid var(--color-primary-soft);
  border-radius: var(--radius-lg);
  padding:       var(--space-6);
}


/* --- BADGES / TAGS ------------------------------------------ */
.badge {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-1);
  font-family:     var(--font-body);
  font-size:       var(--fs-xs);
  font-weight:     var(--fw-semibold);
  letter-spacing:  var(--ls-wide);
  padding:         var(--space-1) var(--space-3);
  border-radius:   var(--radius-pill);
}

.badge-primary { background: var(--color-badge-primary-bg); color: var(--color-badge-primary-text); }
.badge-teal    { background: var(--color-badge-teal-bg);    color: var(--color-badge-teal-text);    }
.badge-accent  { background: var(--color-badge-accent-bg);  color: var(--color-badge-accent-text);  }
.badge-neutral { background: var(--color-badge-neutral-bg); color: var(--color-badge-neutral-text); }


/* --- FORM INPUTS -------------------------------------------- */
.input {
  display:       block;
  width:         100%;
  font-family:   var(--font-body);
  font-size:     var(--fs-base);
  color:         var(--color-text-body);
  background:    var(--color-bg-input);
  border:        1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding:       var(--space-3) var(--space-4);
  transition:
    border-color var(--transition-fast),
    box-shadow   var(--transition-fast);
}

.input::placeholder { color: var(--color-text-hint); }

.input:focus {
  outline:      none;
  border-color: var(--color-border-focus);
  box-shadow:   var(--focus-ring);
}


/* ============================================================
   7. NAVIGATION BASE TOKENS
   ============================================================ */
.navbar {
  background:    var(--color-bg-page);
  border-bottom: 1px solid var(--color-border-default);
  box-shadow:    var(--shadow-xs);
}

.nav-link {
  font-family:  var(--font-body);
  font-size:    var(--fs-sm);
  font-weight:  var(--fw-medium);
  color:        var(--color-text-body);
  transition:   color var(--transition-fast);
}

.nav-link:hover,
.nav-link.active {
  color: var(--color-accent);
}


/* ============================================================
   8. FOOTER BASE TOKENS
   The footer uses --color-bg-primary (navy) as its background.
   All child text uses on-primary tokens.
   ============================================================ */
.footer {
  background:    var(--color-bg-primary);
  padding-block: var(--space-16);
}

.footer-heading {
  font-family:    var(--font-heading);
  font-size:      var(--fs-sm);
  font-weight:    var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color:          var(--color-text-on-primary);
  margin-bottom:  var(--space-4);
}

.footer-link {
  font-family: var(--font-body);
  font-size:   var(--fs-sm);
  color:       var(--color-text-on-primary-muted);
  transition:  color var(--transition-fast);
}

.footer-link:hover {
  color: var(--color-accent);
}

.footer-divider {
  border: none;
  border-top: 1px solid var(--color-border-on-primary);
  margin-block: var(--space-8);
}

.footer-copyright {
  font-size:  var(--fs-xs);
  color:      var(--color-text-on-primary-muted);
  opacity:    0.7;
}


/* ============================================================
   9. RESPONSIVE SCALE ADJUSTMENTS
   ============================================================ */
@media (max-width: 1024px) {
  :root {
    --fs-4xl: 40px;
    --fs-5xl: 50px;
    --section-padding-y: var(--space-16);
  }
}

@media (max-width: 768px) {
  :root {
    --fs-3xl: 28px;
    --fs-4xl: 32px;
    --fs-5xl: 40px;
    --section-padding-y: var(--space-12);
    --section-padding-x: var(--space-4);
  }
}

@media (max-width: 480px) {
  :root {
    --fs-2xl: 24px;
    --fs-3xl: 22px;
    --fs-4xl: 28px;
    --section-padding-y: var(--space-10);
    --section-padding-x: var(--space-3);
  }
}