/* ==========================================================================
   tokens.css — PK Tech Services design tokens
   --------------------------------------------------------------------------
   Milestone 1 · Foundation scaffold

   Source of truth: docs/phase1.md (Design System)
     §1 Color · §2 Typography · §3 Spacing · §4 Grid · §5 Radius
     §15 Motion · §16 Shadows · §17 Accessibility · §18 Token Summary

   Layer role: `tokens` (Phase 6 §5.2). Static custom properties only — no rules.

   Note: the Phase 6 §5.2 cascade-layer model (@layer reset, tokens, base,
   layout, components, utilities, overrides) is deferred until the stylesheets
   are split per component; this milestone ships the plain files requested in
   the M1 scaffold. File load order in index.html mirrors the layer order.
   ========================================================================== */

:root {
  /* Rendering — pin light UA rendering (scrollbars, form controls, canvas)
     so the approved warm theme persists regardless of the OS color-scheme.
     `only light` (not `light`) additionally opts the whole page out of Chrome's
     Auto Dark Theme / forced-dark, which `light` alone does not prevent
     (theme-regression-fix · permanent theme pin). */
  color-scheme: only light;

  /* ------------------------------------------------------------ 1. Colors
     Phase 1 §1.1 — the ONLY colors permitted in the system. No additions, no
     gradients, no glow. Interaction overlays derive from these (§1.4). */

  --color-brand-yellow: #f0ef7b;
  --color-primary:      #43208c;
  --color-secondary:    #159b64;
  --color-accent:       #b88424;
  --color-highlight:    #8a1648;
  --color-background:   #fffdf3;
  --color-surface:      #fff8c7;
  --color-heading:      #2c2c2c;
  --color-body:         #5a5a5a;
  --color-border:       #ddd9a2;
  --color-success:      #159b64;
  --color-white:        #ffffff;

  /* Semantic states — Phase 1 §1.2 */
  --color-info:    var(--color-primary);
  --color-warning: var(--color-accent);
  --color-error:   var(--color-highlight);

  /* -------------------------------------------------------- 2. Typography
     Phase 1 §2 — fonts are self-hosted (Phase 6 §9 · Phase R8.75): Manrope
     + Inter variable TTF and IBM Plex Mono static TTF, declared in
     typography.css. Fallback stacks below. */

  --font-heading: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas,
                  "Liberation Mono", monospace;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Type scale — Phase 1 §2.1 (desktop / tablet / mobile) */
  --text-display:         56px;  --text-display-tablet:  44px;  --text-display-mobile:  36px;
  --text-h1:              44px;  --text-h1-tablet:       36px;  --text-h1-mobile:       30px;
  --text-h2:              32px;  --text-h2-tablet:       28px;  --text-h2-mobile:       24px;
  --text-h3:              24px;  --text-h3-tablet:       22px;  --text-h3-mobile:       20px;
  --text-h4:              20px;  --text-h4-tablet:       19px;  --text-h4-mobile:       18px;
  --text-h5:              16px;  --text-h5-tablet:       16px;  --text-h5-mobile:       15px;
  --text-body-large:      18px;  --text-body-large-tablet: 17px; --text-body-large-mobile: 16px;
  --text-body:            16px;  --text-body-tablet:     16px;  --text-body-mobile:     15px;
  --text-small:           14px;  --text-small-tablet:    14px;  --text-small-mobile:    13px;
  --text-caption:         12px;  --text-caption-tablet:  12px;  --text-caption-mobile:  11px;
  --text-button:          16px;  --text-button-tablet:   15px;  --text-button-mobile:   15px;
  --text-label:           13px;  --text-label-tablet:    12px;  --text-label-mobile:    12px;

  /* Line heights — Phase 1 §2.1 */
  --lh-display:     1.05;
  --lh-h1:          1.1;
  --lh-h2:          1.15;
  --lh-h3:          1.25;
  --lh-h4:          1.3;
  --lh-h5:          1.35;
  --lh-body-large:  1.6;
  --lh-body:        1.6;
  --lh-small:       1.5;
  --lh-caption:     1.4;
  --lh-button:      1;
  --lh-label:       1.3;

  /* Letter spacing — Phase 1 §2.1 */
  --tracking-display:    -0.015em;
  --tracking-h1:         -0.01em;
  --tracking-h2:         -0.005em;
  --tracking-h3:         0;
  --tracking-h4:         0;
  --tracking-h5:         0;
  --tracking-body-large: 0;
  --tracking-body:       0;
  --tracking-small:      0;
  --tracking-caption:    0.005em;
  --tracking-button:     0.005em;
  --tracking-label:      0.5px;

  /* Numeric styles (IBM Plex Mono) — Phase 1 §2.2 */
  --text-stat:      40px;  --text-stat-tablet: 32px;  --text-stat-mobile: 28px;
  --text-data:      16px;
  --text-micro:     13px;

  /* Text measure — Phase 1 §2.3 (paragraphs ≤72ch, long-form ≤65ch) */
  --measure:            72ch;
  --measure-long-form:  65ch;

  /* ------------------------------------------------------------ 3. Spacing
     Phase 1 §3 — strict 8px grid. Tokens are multiples of 8; 4 is reserved for
     micro gaps inside components. */

  --space-4:   4px;
  --space-8:   8px;
  --space-16:  16px;
  --space-24:  24px;
  --space-32:  32px;
  --space-40:  40px;
  --space-48:  48px;
  --space-56:  56px;
  --space-64:  64px;
  --space-80:  80px;
  --space-96:  96px;
  --space-120: 120px;
  --space-128: 128px;

  /* ------------------------------------------------------------ 4. Grid
     Phase 1 §4 — container / gutters / columns / section spacing per breakpoint. */

  --container-max: 1280px;
  --content-max:   1200px;

  --container-padding-mobile: 16px;
  --container-padding-tablet: 28px;
  --container-padding-laptop: 32px;
  --container-padding-desktop: 40px;

  --gutter-mobile:   16px;
  --gutter-tablet:   20px;
  --gutter-desktop:  24px;

  --columns-mobile:  4;
  --columns-tablet:  8;
  --columns-desktop: 12;

  --section-space-mobile:  48px;
  --section-space-tablet:  64px;
  --section-space-laptop:  80px;
  --section-space-desktop: 80px;

  /* Breakpoints — Phase 1 §4.1 */
  --bp-tablet:  768px;
  --bp-laptop:  1024px;
  --bp-desktop: 1280px;

  /* --------------------------------------------------------- 5. Border radius
     Phase 1 §5 — subtle, two-tier. Never exceed lg on interactive elements. */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-full: 999px;

  /* ----------------------------------------------------------- 6. Shadows
     Phase 1 §16 — single source color: heading (#2c2c2c) at low opacity. */

  --shadow-hairline: 0 1px 2px rgba(44, 44, 44, 0.06);
  --shadow-raised:   0 2px 8px rgba(44, 44, 44, 0.08);
  --shadow-overlay:  0 12px 32px rgba(44, 44, 44, 0.12);
  --shadow-inset:    inset 0 1px 2px rgba(44, 44, 44, 0.04);

  /* ------------------------------------------------------------ 7. Motion
     Phase 1 §15 — single easing site-wide; micro/standard/image durations. */

  --duration-micro:    150ms;
  --duration-standard: 250ms;
  --duration-image:    400ms;
  --ease-site:         cubic-bezier(0.2, 0, 0, 1);

  --transition-fast:     var(--duration-micro)    var(--ease-site);
  --transition-standard: var(--duration-standard) var(--ease-site);
  --transition-image:    var(--duration-image)    var(--ease-site);

  /* --------------------------------------------------- 8. Accessibility
     Phase 1 §17 — focus ring, touch target, z-index floor. */

  --focus-ring:   2px solid var(--color-primary);
  --focus-offset: 2px;
  --touch-min:    44px;

  --z-header:     100;
  --z-dropdown:   200;
  --z-bottom-bar: 250;
  --z-overlay:    300;
}