/**
 * nji.io Design Tokens
 * Source of truth for all CSS custom properties.
 * Matches visual-specifications.md exactly.
 *
 * @package nji-theme
 */

:root {

  /* ── Colors ─────────────────────────────────────── */

  /* Primary */
  --color-primary:        #0A1A2F; /* Deep Tech Blue */
  --color-primary-light:  #1F4E79; /* Steel Blue */

  /* Secondary */
  --color-secondary:      #2E2E2E; /* Graphite Gray */
  --color-secondary-alt:  #4A4F57; /* Slate Gray */

  /* Accents */
  --color-accent-green:   #4CFF8F; /* Electric Green — CTAs, IoT highlights */
  --color-accent-orange:  #FF7A1A; /* Signal Orange — logistics, warnings */
  --color-accent-cyan:    #22D3EE; /* Cyan — LAB category */
  --color-accent-blue:    #4DA6FF; /* Tech Blue — Projects, Software, IoT */
  --color-accent-purple:  #C864FF; /* Purple — Training */

  /* Neutrals */
  --color-bg:              #F7F9FB; /* Off-White — light mode background */
  --color-bg-alt:          #EEF2F7; /* Alternate section background (light mode) */
  --color-bg-dark:         #0A1A2F; /* Deep Tech Blue — dark mode background */
  --color-surface:         #FFFFFF; /* Card / panel surface */
  --color-surface-alt:     #F0F4F8; /* Slightly recessed surface */
  --color-surface-dark:    #112240; /* Dark mode card surface */
  --color-border:          #D0D4D9; /* Cool Gray — lines, inputs */
  --color-text:            #0B0B0B; /* Ink Black — primary text */
  --color-text-muted:      #555555; /* Carbon Gray — secondary text */
  --color-text-inverse:    #F7F9FB; /* Text on dark backgrounds */
  /* Stable light text for sections that are ALWAYS dark (hero, header, footer,
     page-header, cat-hero, cat-cta) regardless of the active colour mode. */
  --color-on-dark:         #E0E8F0;
  --color-on-dark-muted:   rgba(224, 232, 240, 0.65);

  /* Links — accessible on light backgrounds (5.8 : 1 / 8.6 : 1 on #FFF) */
  --color-link:            #1565C0;
  --color-link-hover:      #0D47A1;

  /* ── Mode meta ─────────────────────────────────── */
  color-scheme: light;

  /* ── Typography ─────────────────────────────────── */

  --font-heading:  'Inter', system-ui, sans-serif;
  --font-body:     'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:     'IBM Plex Mono', 'Courier New', monospace;

  /* Sizes (desktop; mobile overrides below) */
  --text-h1:   3rem;      /* 48px */
  --text-h2:   2.25rem;   /* 36px */
  --text-h3:   1.75rem;   /* 28px */
  --text-xl:   1.25rem;   /* 20px */
  --text-lg:   1.125rem;  /* 18px */
  --text-base: 1rem;      /* 16px */
  --text-sm:   0.9375rem; /* 15px */
  --text-xs:   0.875rem;  /* 14px */

  /* Weights */
  --font-weight-normal:    400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-black:     800;

  /* Line heights */
  --leading-heading: 1.4;
  --leading-body:    1.6;
  --leading-relaxed: 1.75;
  --leading-snug:    1.4;

  /* Paragraph spacing */
  --paragraph-spacing: 1.2em;

  /* ── Spacing scale (4px base unit) ──────────────── */

  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-30:  7.5rem;    /* 120px */
  --space-40: 10rem;      /* 160px */

  /* ── Layout ─────────────────────────────────────── */

  --container-max:    1800px;   /* safety cap — .container uses width: 80% for standard screens */
  --container-wide:   2000px;   /* wide variant safety cap — width: 90% in practice */
  --container-width:  80%;      /* standard container percentage width */
  --container-width-wide: 90%;  /* wide container percentage width */
  --gutter-desktop:   var(--space-6);  /* 24px */
  --gutter-mobile:    var(--space-4);  /* 16px */
  --sidebar-width:    320px;
  --content-narrow:   72ch;

  /* Header height — 12 vh, clamped between 100 px and 200 px */
  --header-height: clamp(6.25rem, 12vh, 12.5rem);

  /* Section vertical padding */
  --section-padding-desktop: var(--space-20); /* 80px */
  --section-padding-mobile:  var(--space-12); /* 48px */
  --hero-padding-desktop:    var(--space-30); /* 120px */
  --footer-padding-desktop:  var(--space-16); /* 64px */

  /* ── Border radius ───────────────────────────────── */

  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   12px;
  --radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────── */

  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 2px 6px rgba(0, 0, 0, 0.08);
  --shadow-lg:  0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-hover: 0 6px 20px rgba(10, 26, 47, 0.16);

  /* ── Transitions ─────────────────────────────────── */

  --transition-base:   150ms ease;
  --transition-medium: 250ms ease;

  /* ── Z-index scale ───────────────────────────────── */

  --z-below:   -1;
  --z-base:     0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
}

/* ── Tablet / mobile overrides (≤ 768px) ────────── */
@media (max-width: 768px) {
  :root {
    --header-height: 4rem;                      /* 64px — compact on mobile */
    --text-h1: 2.5rem;                          /* 40px — between 48px desktop & 32px mobile */
    --text-h2: 2rem;                            /* 32px */
    --text-h3: 1.5rem;                          /* 24px */
    --section-padding-desktop: var(--space-16); /* 64px — eased for tablet */
  }
}

/* ── Mobile overrides ────────────────────────────── */
@media (max-width: 480px) {
  :root {
    --text-h1:   2rem;      /* 32px */
    --text-h2:   1.75rem;   /* 28px */
    --text-h3:   1.375rem;  /* 22px */
    --text-lg:   1rem;      /* 16px */
    --text-sm:   0.9375rem; /* 15px */
    --text-xs:   0.875rem;  /* 14px */
  }
}

/* ── Dark mode — system preference (lowest priority) ─── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:             #0A1A2F;
    --color-bg-alt:         #0D1E35;
    --color-surface:        #112240;
    --color-surface-alt:    #162B46;
    --color-border:         rgba(255, 255, 255, 0.1);
    --color-text:           #E0E8F0;
    --color-text-muted:     #7D99B6;
    --color-text-inverse:   #0A1A2F;
    --color-on-dark:        #E0E8F0;
    --color-on-dark-muted:  rgba(224, 232, 240, 0.65);
    --shadow-sm:            0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md:            0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg:            0 4px 20px rgba(0, 0, 0, 0.5);
    --shadow-hover:         0 8px 24px rgba(0, 0, 0, 0.5);
    --color-link:            #4DA6FF;
    --color-link-hover:      #4CFF8F;
    color-scheme: dark;
  }
}

/* ── Dark mode — manual class (overrides system preference) ── */
html.dark-mode {
  --color-bg:             #0A1A2F;
  --color-bg-alt:         #0D1E35;
  --color-surface:        #112240;
  --color-surface-alt:    #162B46;
  --color-border:         rgba(255, 255, 255, 0.1);
  --color-text:           #E0E8F0;
  --color-text-muted:     #7D99B6;
  --color-text-inverse:   #0A1A2F;
  --color-on-dark:        #E0E8F0;
  --color-on-dark-muted:  rgba(224, 232, 240, 0.65);
  --shadow-sm:            0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md:            0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg:            0 4px 20px rgba(0, 0, 0, 0.5);
  --shadow-hover:         0 8px 24px rgba(0, 0, 0, 0.5);
  --color-link:            #4DA6FF;
  --color-link-hover:      #4CFF8F;
  color-scheme: dark;
}

/* ── Light mode — manual class (locks light even on dark OS) ── */
html.light-mode {
  --color-bg:             #F7F9FB;
  --color-bg-alt:         #EEF2F7;
  --color-surface:        #FFFFFF;
  --color-surface-alt:    #F0F4F8;
  --color-border:         #D0D4D9;
  --color-text:           #0B0B0B;
  --color-text-muted:     #555555;
  --color-text-inverse:   #F7F9FB;
  --color-link:           #1565C0;
  --color-link-hover:     #0D47A1;
  --shadow-sm:            0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:            0 2px 6px rgba(0, 0, 0, 0.08);
  --shadow-lg:            0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-hover:         0 6px 20px rgba(10, 26, 47, 0.16);
  color-scheme: light;
}

/* ── Reduced motion ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-base:   0ms;
    --transition-medium: 0ms;
  }
}