/* ==========================================================================
   PKOUG Design System — Tokens
   --------------------------------------------------------------------------
   Single source of truth for colour, type, spacing, radius, shadow and
   motion. Contains variables only: no element or component styling.

   Namespacing
   -----------
   Every token is prefixed `--pk-` followed by a category word
   (`--pk-brand-*`, `--pk-space-*`, `--pk-text-*`, ...). The legacy bare
   properties `--pk-red` and `--pk-green` used by includes/footer.php are
   deliberately NOT redefined here, so loading this file cannot alter the
   appearance of any existing page.

   Theming
   -------
   The complete light palette is defined on bare `:root`. Dark values are
   redefined twice — once under `prefers-color-scheme` for visitors on the
   default "system" setting, once under `[data-theme="dark"]` so the site's
   existing theme toggle wins in both directions. No colour is ever defined
   only inside a media query.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* ---------------------------------------------------------------------
     1. BRAND
     `--pk-brand-red` is the PKOUG logo red, reserved for fills, badges and
     brand marks. `--pk-brand-red-ink` is the deeper shade required for text,
     links and focus rings: the logo red only clears WCAG AA against pure
     white and fails against every tinted surface in this system.
     --------------------------------------------------------------------- */
  /* Fill colours — identical in both themes. A brand fill is the brand
     colour; it does not get lighter in dark mode, or the white label on it
     stops meeting AA. */
  --pk-brand-red:        #E81C23;
  --pk-brand-red-hover:  #A00F14;
  --pk-on-brand:         #FFFFFF;   /* label on any brand-red fill */

  /* Ink colours — these DO flip per theme, because they sit on the page
     background rather than on a fill. */
  --pk-brand-red-ink:      #C4141A;
  --pk-brand-red-ink-hover:#A00F14;

  --pk-brand-red-tint:   #FEF2F3;
  --pk-brand-red-edge:   #F7CDCF;

  --pk-brand-green:      #124D26;
  --pk-brand-green-lift: #2E9E52;
  --pk-brand-green-tint: #EFF7F1;

  /* The green equivalent of `--pk-brand-red-ink`, and it exists for the same
     reason: this is the shade used for TEXT on the page background, so it
     flips per theme while a green fill would not. `--pk-brand-green-lift`
     (#2E9E52) is the wrong choice here — it measures 3.4:1 on white, which
     clears AA only at large sizes and leaves no headroom on a tinted hero. */
  --pk-brand-green-ink:  #124D26;

  --pk-brand-navy:       #1E3A5F;
  --pk-brand-navy-lift:  #5B8AC4;
  --pk-brand-navy-tint:  #EEF3FA;

  /* ---------------------------------------------------------------------
     2. NEUTRALS — one charcoal ramp replacing the three competing sets
     --------------------------------------------------------------------- */
  --pk-n-950: #0B0F14;
  --pk-n-900: #111827;
  --pk-n-800: #1F2937;
  --pk-n-700: #374151;
  --pk-n-600: #4B5563;
  /* n-500 is deliberately a shade darker than the conventional #6B7280:
     that value measures 4.39:1 on --pk-surface-sunk and fails AA. */
  --pk-n-500: #666F7C;
  --pk-n-400: #9CA3AF;
  --pk-n-300: #D1D5DB;
  --pk-n-200: #E5E7EB;
  --pk-n-100: #F3F4F6;
  --pk-n-50:  #F9FAFB;
  --pk-white: #FFFFFF;

  /* ---------------------------------------------------------------------
     3. SEMANTIC STATUS
     --------------------------------------------------------------------- */
  --pk-success:      #15803D;
  --pk-success-tint: #ECFDF3;
  --pk-success-edge: #A6E9C1;

  --pk-warning:      #B45309;
  --pk-warning-tint: #FFF8EB;
  --pk-warning-edge: #F5D08A;

  --pk-danger:       #B91C1C;
  --pk-danger-tint:  #FEF2F2;
  --pk-danger-edge:  #F5B5B5;

  --pk-info:         #1E3A5F;
  --pk-info-tint:    #EEF3FA;
  --pk-info-edge:    #B9CCE5;

  /* ---------------------------------------------------------------------
     4. APPLIED SURFACES & INK (what components actually reference)
     --------------------------------------------------------------------- */
  --pk-bg:            var(--pk-n-50);
  --pk-surface:       var(--pk-white);
  --pk-surface-sunk:  var(--pk-n-100);
  --pk-surface-raised:var(--pk-white);
  --pk-overlay:       rgba(11, 15, 20, 0.55);

  --pk-ink:           var(--pk-n-900);
  --pk-ink-soft:      var(--pk-n-700);
  --pk-ink-muted:     var(--pk-n-600);
  --pk-ink-faint:     var(--pk-n-500);
  --pk-ink-invert:    var(--pk-white);

  --pk-border:        var(--pk-n-200);
  --pk-border-strong: var(--pk-n-300);
  --pk-divider:       var(--pk-n-200);

  --pk-link:          var(--pk-brand-red-ink);
  --pk-link-hover:    var(--pk-brand-red-ink-hover);

  /* ---------------------------------------------------------------------
     LEGACY ALIASES — an earlier token vocabulary, never migrated.
     `pkoug-admin.css` and `pkoug-blog.css` were written against these names
     and kept using them after the palette above was rewritten. They resolved
     to NOTHING: a `var()` with no definition and no fallback is invalid at
     computed-value time, so `color` fell back to inherit and `padding` to
     zero. That is why admin role badges, status pills, stat links, tab
     hover/selected states and the sign-in card padding all rendered with no
     styling at all — silently, because an undefined custom property is not a
     parse error and never reaches the console.

     Defined as aliases rather than literals, so they follow every theme
     automatically instead of needing a second set of overrides below.
     `--pk-primary` is deliberately ABSENT: its eleven usages meant three
     different things (danger, selected, link) and each has been replaced with
     the semantic token it actually meant. Do not add it back as a catch-all.
     --------------------------------------------------------------------- */
  --pk-text:          var(--pk-ink);
  --pk-text-muted:    var(--pk-ink-muted);
  --pk-surface-2:     var(--pk-surface-sunk);

  /* Focus: 3:1 minimum against BOTH the control and the page behind it
     (WCAG 2.2 SC 1.4.11). Applied as ring + offset, never `outline:none`. */
  --pk-focus-ring:    var(--pk-brand-red-ink);
  --pk-focus-halo:    rgba(196, 20, 26, 0.24);
  --pk-focus-width:   2px;
  --pk-focus-offset:  2px;

  /* ---------------------------------------------------------------------
     5. TYPOGRAPHY
     System stack: nothing to download, no layout shift, no licence cost.
     Weights stop at 800 — the current site requests 950, which no system
     font provides, so today's hierarchy silently flattens to 700.
     --------------------------------------------------------------------- */
  --pk-font-sans: system-ui, -apple-system, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --pk-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
                  "Liberation Mono", monospace;

  --pk-text-xs:   0.75rem;    /* 12 */
  --pk-text-sm:   0.875rem;   /* 14 */
  --pk-text-base: 1rem;       /* 16 */
  --pk-text-lg:   1.125rem;   /* 18 */
  --pk-text-xl:   clamp(1.25rem,  1.18rem + 0.35vw, 1.5rem);    /* 20 → 24 */
  --pk-text-2xl:  clamp(1.5rem,   1.36rem + 0.70vw, 1.875rem);  /* 24 → 30 */
  --pk-text-3xl:  clamp(1.875rem, 1.66rem + 1.07vw, 2.5rem);    /* 30 → 40 */
  --pk-text-4xl:  clamp(2.25rem,  1.87rem + 1.90vw, 3.25rem);   /* 36 → 52 */
  --pk-text-5xl:  clamp(2.75rem,  2.10rem + 3.20vw, 4rem);      /* 44 → 64 */

  --pk-weight-normal:   400;
  --pk-weight-medium:   500;
  --pk-weight-semibold: 600;
  --pk-weight-bold:     700;
  --pk-weight-heavy:    800;

  --pk-leading-tight:   1.15;
  --pk-leading-snug:    1.3;
  --pk-leading-normal:  1.6;
  --pk-leading-relaxed: 1.75;

  --pk-tracking-tight:  -0.02em;
  --pk-tracking-normal: 0;
  --pk-tracking-wide:   0.04em;

  /* Body copy caps at ~70ch for readability */
  --pk-measure: 68ch;

  /* ---------------------------------------------------------------------
     6. SPACING — 4px base
     --------------------------------------------------------------------- */
  --pk-space-1:  0.25rem;  /*  4 */
  --pk-space-2:  0.5rem;   /*  8 */
  --pk-space-3:  0.75rem;  /* 12 */
  --pk-space-4:  1rem;     /* 16 */
  --pk-space-5:  1.25rem;  /* 20 */
  --pk-space-6:  1.5rem;   /* 24 */
  --pk-space-8:  2rem;     /* 32 */
  --pk-space-10: 2.5rem;   /* 40 */
  --pk-space-12: 3rem;     /* 48 */
  --pk-space-16: 4rem;     /* 64 */
  --pk-space-20: 5rem;     /* 80 */
  --pk-space-24: 6rem;     /* 96 */

  --pk-section-y:     clamp(3rem, 2rem + 5vw, 6rem);
  --pk-container:     1200px;
  --pk-container-pad: clamp(1rem, 0.5rem + 2vw, 2rem);

  /* ---------------------------------------------------------------------
     7. RADIUS — reconciles today's competing 12px / 18px conventions
     --------------------------------------------------------------------- */
  --pk-radius-sm:   6px;
  --pk-radius-md:   10px;
  --pk-radius-lg:   16px;
  --pk-radius-xl:   24px;
  --pk-radius-full: 999px;

  /* ---------------------------------------------------------------------
     8. ELEVATION
     --------------------------------------------------------------------- */
  --pk-shadow-xs: 0 1px 2px rgba(11, 15, 20, 0.06);
  --pk-shadow-sm: 0 1px 3px rgba(11, 15, 20, 0.08), 0 1px 2px rgba(11, 15, 20, 0.04);
  --pk-shadow-md: 0 4px 12px rgba(11, 15, 20, 0.08), 0 2px 4px rgba(11, 15, 20, 0.04);
  --pk-shadow-lg: 0 12px 28px rgba(11, 15, 20, 0.12), 0 4px 8px rgba(11, 15, 20, 0.05);

  /* ---------------------------------------------------------------------
     9. MOTION — every duration routes through these so the reduced-motion
     block at the end of this file can neutralise all of them at once.
     --------------------------------------------------------------------- */
  --pk-ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --pk-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --pk-dur-fast:  120ms;
  --pk-dur:       200ms;
  --pk-dur-slow:  320ms;

  /* ---------------------------------------------------------------------
     10. LAYERING
     --------------------------------------------------------------------- */
  --pk-z-base:     0;
  --pk-z-dropdown: 100;
  --pk-z-sticky:   200;
  --pk-z-header:   300;
  --pk-z-overlay:  400;
  --pk-z-modal:    500;
  --pk-z-toast:    600;

  /* ---------------------------------------------------------------------
     11. BREAKPOINTS (reference only — CSS cannot use vars in media queries)
     One scale, replacing the eight ad-hoc values in use today
     (540 / 640 / 720 / 760 / 900 / 980 / 1100 / 1180).

       sm   480px   large phone
       md   768px   tablet portrait
       lg  1024px   tablet landscape / small laptop
       xl  1280px   desktop
       2xl 1536px   large desktop
     --------------------------------------------------------------------- */
}

/* ==========================================================================
   DARK THEME
   Redefines only the tokens that change. Declared twice so that the system
   preference and the explicit toggle both resolve correctly.
   ========================================================================== */

/* Shared dark values, applied via both selectors below. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* --pk-brand-red, --pk-brand-red-hover and --pk-on-brand are NOT
       redefined here: a red button keeps its red fill and white label in
       both themes. Only the ink variants flip. */
    --pk-brand-red-ink:       #FF6E73;
    --pk-brand-red-ink-hover: #FF9599;
    --pk-brand-red-tint:      #2A1315;
    --pk-brand-red-edge:      #5E2226;

    --pk-brand-green:      #4FBF77;
    --pk-brand-green-lift: #4FBF77;
    --pk-brand-green-tint: #0F2417;
    --pk-brand-green-ink:  #4FBF77;

    --pk-brand-navy:       #8FB4E0;
    --pk-brand-navy-lift:  #8FB4E0;
    --pk-brand-navy-tint:  #131E2C;

    --pk-success:      #4ADE80;
    --pk-success-tint: #0E2318;
    --pk-success-edge: #1E5236;

    --pk-warning:      #FBBF4A;
    --pk-warning-tint: #241B0B;
    --pk-warning-edge: #5C4416;

    --pk-danger:       #FF7B7B;
    --pk-danger-tint:  #2A1315;
    --pk-danger-edge:  #5E2226;

    --pk-info:         #8FB4E0;
    --pk-info-tint:    #131E2C;
    --pk-info-edge:    #2B4A6E;

    --pk-bg:             #0B0F14;
    --pk-surface:        #131A22;
    --pk-surface-sunk:   #0E141B;
    --pk-surface-raised: #1A222C;
    --pk-overlay:        rgba(0, 0, 0, 0.68);

    --pk-ink:        #E9EDF3;
    --pk-ink-soft:   #C6CEDA;
    --pk-ink-muted:  #A3AEBD;
    --pk-ink-faint:  #8A96A6;
    --pk-ink-invert: #0B0F14;

    --pk-border:        rgba(233, 237, 243, 0.14);
    --pk-border-strong: rgba(233, 237, 243, 0.24);
    --pk-divider:       rgba(233, 237, 243, 0.10);

    --pk-focus-ring: #FF6E73;
    --pk-focus-halo: rgba(255, 110, 115, 0.30);

    --pk-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --pk-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
    --pk-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
    --pk-shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.35);
  }
}

:root[data-theme="dark"] {
  /* --pk-brand-red, --pk-brand-red-hover and --pk-on-brand are NOT
     redefined here: a red button keeps its red fill and white label in
     both themes. Only the ink variants flip. */
  --pk-brand-red-ink:       #FF6E73;
  --pk-brand-red-ink-hover: #FF9599;
  --pk-brand-red-tint:      #2A1315;
  --pk-brand-red-edge:      #5E2226;

  --pk-brand-green:      #4FBF77;
  --pk-brand-green-lift: #4FBF77;
  --pk-brand-green-tint: #0F2417;
  --pk-brand-green-ink:  #4FBF77;

  --pk-brand-navy:       #8FB4E0;
  --pk-brand-navy-lift:  #8FB4E0;
  --pk-brand-navy-tint:  #131E2C;

  --pk-success:      #4ADE80;
  --pk-success-tint: #0E2318;
  --pk-success-edge: #1E5236;

  --pk-warning:      #FBBF4A;
  --pk-warning-tint: #241B0B;
  --pk-warning-edge: #5C4416;

  --pk-danger:       #FF7B7B;
  --pk-danger-tint:  #2A1315;
  --pk-danger-edge:  #5E2226;

  --pk-info:         #8FB4E0;
  --pk-info-tint:    #131E2C;
  --pk-info-edge:    #2B4A6E;

  --pk-bg:             #0B0F14;
  --pk-surface:        #131A22;
  --pk-surface-sunk:   #0E141B;
  --pk-surface-raised: #1A222C;
  --pk-overlay:        rgba(0, 0, 0, 0.68);

  --pk-ink:        #E9EDF3;
  --pk-ink-soft:   #C6CEDA;
  --pk-ink-muted:  #A3AEBD;
  --pk-ink-faint:  #8A96A6;
  --pk-ink-invert: #0B0F14;

  --pk-border:        rgba(233, 237, 243, 0.14);
  --pk-border-strong: rgba(233, 237, 243, 0.24);
  --pk-divider:       rgba(233, 237, 243, 0.10);

  --pk-focus-ring: #FF6E73;
  --pk-focus-halo: rgba(255, 110, 115, 0.30);

  --pk-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --pk-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
  --pk-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
  --pk-shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.35);
}

/* ==========================================================================
   REDUCED MOTION
   Neutralises the duration tokens at source, so any component using them
   stops animating without needing its own media query.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --pk-dur-fast: 1ms;
    --pk-dur:      1ms;
    --pk-dur-slow: 1ms;
  }
}