/* ============================================================
   PEKKLA - Design Tokens
   Derived from "Vizualinis Identitetas - PEKKLA - V01" (2026-04)
   UAVs · UGVs · FPV Training - built in Lithuania
   ============================================================ */

:root {
  /* ---- Brand colours (core palette) ---- */
  --pk-bone:      #f2f1eb;   /* light surface / paper        */
  --pk-charcoal:  #353029;   /* ink / dark surface           */
  --pk-lime:      #b4bf58;   /* accent / signal              */
  --pk-white:     #ffffff;   /* pure white (logo on photo)   */

  /* ---- Tints & shades (derived, for UI states) ---- */
  --pk-charcoal-900: #1f1c17;
  --pk-charcoal-700: #2a2620;
  --pk-charcoal-500: #353029;
  --pk-charcoal-300: #5c5650;
  --pk-charcoal-100: #8f8a83;

  --pk-bone-100: #f7f6f1;
  --pk-bone-300: #ecebe3;
  --pk-bone-500: #f2f1eb;
  --pk-bone-700: #dedcd2;

  --pk-lime-700: #97a23f;
  --pk-lime-500: #b4bf58;
  --pk-lime-300: #cdd587;

  /* ---- Semantic roles ---- */
  --pk-bg:            var(--pk-bone);
  --pk-bg-inverse:    var(--pk-charcoal);
  --pk-surface:       var(--pk-bone-100);
  --pk-text:          var(--pk-charcoal);
  --pk-text-muted:    var(--pk-charcoal-300);
  --pk-text-inverse:  var(--pk-bone);
  --pk-accent:        var(--pk-lime);
  --pk-accent-ink:    var(--pk-charcoal);   /* text on lime */
  --pk-border:        var(--pk-bone-700);
  --pk-border-strong: var(--pk-charcoal);
  --pk-rule:          var(--pk-lime);       /* the thin vertical rule */
  --pk-focus:         var(--pk-lime-700);

  /* ---- Typography ---- */
  /* Primary / display: ERBAUM (licensed). Web stand-in: Oxanium. */
  --pk-font-display: "Erbaum", "Oxanium", "Chakra Petch", sans-serif;
  /* Secondary / body & UI: Montserrat. */
  --pk-font-body:    "Montserrat", system-ui, -apple-system, sans-serif;
  /* Mono / technical accents (tagline, labels). */
  --pk-font-mono:    "Oxanium", "Erbaum", ui-monospace, monospace;

  --pk-fw-thin: 100;
  --pk-fw-light: 300;
  --pk-fw-regular: 400;
  --pk-fw-medium: 500;
  --pk-fw-bold: 700;

  /* Type scale (rem) - display uses tight tracking, body looser */
  --pk-fs-display: 5rem;     /* 80px hero            */
  --pk-fs-h1:      3.25rem;  /* 52px                 */
  --pk-fs-h2:      2.25rem;  /* 36px                 */
  --pk-fs-h3:      1.5rem;   /* 24px                 */
  --pk-fs-lead:    1.25rem;  /* 20px lead paragraph  */
  --pk-fs-body:    1rem;     /* 16px                 */
  --pk-fs-small:   0.875rem; /* 14px                 */
  --pk-fs-label:   0.75rem;  /* 12px mono labels     */

  /* Line-height (leading) - from the guideline specs */
  --pk-lh-display: 1.0;   /* headings ≈100% */
  --pk-lh-heading: 1.1;   /* subheadings ≈110% */
  --pk-lh-body:    1.5;   /* body ≈133–150% */

  /* Letter-spacing (tracking). IL tracking 25 = 0.025em, -25 = -0.025em */
  --pk-track-display: -0.025em;  /* tight, Erbaum Light headings */
  --pk-track-label:    0.18em;   /* wide, uppercase mono labels  */
  --pk-track-body:     0.005em;

  /* ---- Spacing (8px base grid) ---- */
  --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.5rem;   /* 24 */
  --pk-space-6: 2rem;     /* 32 */
  --pk-space-8: 3rem;     /* 48 */
  --pk-space-10: 4rem;    /* 64 */
  --pk-space-12: 6rem;    /* 96 */

  /* ---- Radius (squared / technical brand → small radii) ---- */
  --pk-radius-0: 0;
  --pk-radius-sm: 2px;
  --pk-radius-md: 4px;
  --pk-radius-lg: 8px;

  /* ---- Borders & rules ---- */
  --pk-border-width: 1.5px;
  --pk-rule-width: 1.5px;   /* the lime vertical guideline rule */

  /* ---- Elevation (kept minimal - flat, editorial brand) ---- */
  --pk-shadow-sm: 0 1px 2px rgba(31,28,23,0.10);
  --pk-shadow-md: 0 8px 24px rgba(31,28,23,0.16);

  /* ---- Layout ---- */
  --pk-maxw: 1200px;
  --pk-gutter: clamp(1rem, 4vw, 4rem);
  --pk-clearspace: 1em; /* logo clear space = height of the "P" glyph */
}

/* ---- Dark / inverse context (photo & hero blocks) ---- */
.pk-dark {
  --pk-bg: var(--pk-charcoal);
  --pk-surface: var(--pk-charcoal-700);
  --pk-text: var(--pk-bone);
  --pk-text-muted: var(--pk-charcoal-100);
  --pk-border: var(--pk-charcoal-300);
  color: var(--pk-text);
  background: var(--pk-bg);
}