/* ============================================================
   PuttGenius by SYNK Golf - Design Tokens v2
   (PuttGenius = brand. PuttDock = the in-cup device.)
   Direction: precision acoustic instrument. NOT golf gadget.
   Hierarchy (enforced): graphite carries -> paper second ->
   stone/titanium structure -> green is ENVIRONMENT -> lime is SIGNAL.
   All text pairs AA-audited. Consume only - do not author values here.
   ============================================================ */

:root {

  /* ---- SURFACES: graphite carries the page ---- */
  --pg-graphite:        #17191B;   /* primary page ground (dark)        */
  --pg-graphite-raise:  #1F2123;   /* raised block                      */
  --pg-graphite-high:   #292C2E;   /* highest raise / hover ground      */

  /* ---- PAPER: second carrier (technical / Mode A) ---- */
  --pg-paper:   #F2EDE3;
  --pg-paper-2: #E8E1D3;
  --pg-ink:     #14171A;

  /* ---- STONE / TITANIUM: structure, hairlines, secondary text ---- */
  --pg-stone-1: #B9BBB4;
  --pg-stone-2: #8A8D86;
  --pg-stone-3: #5C5F59;

  /* ---- GREEN: ENVIRONMENT ONLY. Never page chrome. Never text. ---- */
  --pg-green-env: #0E3A2B;

  /* ---- LIME: SIGNAL ONLY. One per view. ---- */
  --pg-lime: #C6F03A;

  /* ---- TEXT ROLES (AA-audited ratios noted) ---- */
  --pg-text-dark:      #F2EDE3;  /* 15.1:1 on graphite      */
  --pg-text-dark-mut:  #8A8D86;  /* 5.2:1  on graphite      */
  --pg-text-light:     #14171A;  /* 15.4:1 on paper         */
  --pg-text-light-mut: #5C5F59;  /* 5.6:1  on paper         */

  /* ---- HAIRLINES (1px, the only divider) ---- */
  --pg-hairline-dark:  rgba(185,187,180,.16);
  --pg-hairline-light: rgba(20,23,26,.14);

  /* ---- TYPE: swap these three vars to upgrade to Sohne/Diatype later ---- */
  --pg-font-display: 'Geist','Inter',-apple-system,'Segoe UI',sans-serif;
  --pg-font-body:    'Inter',-apple-system,'Segoe UI',Arial,sans-serif;
  --pg-font-mono:    'Geist Mono','IBM Plex Mono',ui-monospace,Menlo,monospace;

  /* ---- TYPE SCALE: restrained. Display capped well below v1's 104px. ---- */
  --pg-fs-display: clamp(40px, 5vw, 68px);
  --pg-fs-h2:      clamp(27px, 3.2vw, 40px);
  --pg-fs-h3:      22px;
  --pg-fs-body:    17px;
  --pg-fs-sm:      15px;
  --pg-fs-mono:    13.5px;
  --pg-fs-kicker:  12px;

  --pg-tracking-tight:  -0.02em;   /* display */
  --pg-tracking-kicker:  0.18em;   /* mono kickers */
  --pg-lh-display: 1.06;
  --pg-lh-body:    1.62;

  /* ---- SPACING (8pt) ---- */
  --pg-space-1:4px;  --pg-space-2:8px;   --pg-space-3:12px; --pg-space-4:16px;
  --pg-space-5:24px; --pg-space-6:32px;  --pg-space-7:48px; --pg-space-8:64px;
  --pg-space-9:96px; --pg-space-10:128px;--pg-space-12:192px;

  /* ---- LAYOUT ---- */
  --pg-maxw:   1080px;
  --pg-gutter: 32px;

  /* ---- RADII: machined. 0-4px only. No pills. ---- */
  --pg-radius-0: 0;
  --pg-radius-1: 2px;
  --pg-radius-2: 4px;

  /* ---- SHADOW: renders only. UI is flat, matte. ---- */
  --pg-shadow-render: 0 40px 120px rgba(0,0,0,.55);

  /* ---- MOTION: slow, eased, singular ---- */
  --pg-ease:     cubic-bezier(.2,.6,.2,1);
  --pg-dur:      .4s;
  --pg-dur-ping: 1.6s;

  /* ---- SENSOR-STATE VOCABULARY ---- */
  --pg-state-idle:   var(--pg-stone-3);  /* dormant            */
  --pg-state-armed:  var(--pg-text-dark);/* ready / white      */
  --pg-state-read:   var(--pg-lime);     /* reading / reward   */
}

@media (prefers-reduced-motion: reduce) {
  :root { --pg-dur: 0s; --pg-dur-ping: 0s; }
}