/*
 * PTP design v2 tokens (audit C 1.1). Primitives and semantic tokens only: :root, no selectors.
 * Breakpoints (media queries cannot read variables): sm 650, md 900, nav 1000, lg 1280, xl 1600.
 * Contrast notes: yellow is a fill only (yellow text on white is 1.74:1). Gold text on light uses --ptp-color-gold-text (6.7:1).
 */
:root {
  /* Color */
  --ptp-color-yellow: #FCB900;
  --ptp-color-ink: #0A0A0A;
  --ptp-color-paper: #FFFFFF;
  --ptp-color-smoke: #EEEEEB;
  --ptp-color-muted: #595951;          /* 6.1:1 on smoke */
  --ptp-color-muted-dark: #B9B9B1;     /* 9.1:1 on ink */
  --ptp-color-line: #D6D6CF;
  --ptp-color-input-line: #6F6F68;     /* 5.0:1 on white (WCAG 1.4.11 needs 3:1) */
  --ptp-color-nav-shell: rgba(238, 238, 235, .96); /* FlexWork smoke #eee capsule */
  --ptp-color-nav-border: #C9C9C3;   /* silver */
  --ptp-color-gold-text: #765700;
  --ptp-color-on-yellow-muted: #3D3000; /* 9.6:1 on yellow */
  --ptp-color-pending-bg: #F4EDCF;
  --ptp-color-pending-fg: #5C4600;      /* 7.6:1 */
  --ptp-color-overlay: linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.34) 30%, rgba(0,0,0,.42) 62%, rgba(0,0,0,.86) 100%);
  --ptp-color-vignette: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 100%);
  --ptp-photo-grade: grayscale(1) contrast(1.12) brightness(.82);   /* cinematic black-and-white grade (FlexWork) */
  --ptp-color-caption-bg: rgba(10, 10, 10, .88);
  --ptp-color-error: #A31919;
  --ptp-color-error-bg: #FFF0F0;
  --ptp-color-success: #176633;
  --ptp-color-success-bg: #EAF7ED;

  /* Type */
  --ptp-font-display: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
  --ptp-font-body: 'Inter', Arial, Helvetica, sans-serif;
  --ptp-fs-hero: 120px;            /* FlexWork home: 120px, 80 @991, 65 @767, 50 @479 (components.css) */
  --ptp-fs-mega: clamp(4.4rem, 15vw, 13.5rem);
  --ptp-fs-title: clamp(3.4rem, 10vw, 8.125rem);   /* inner display 130px */
  --ptp-fs-h2: clamp(3rem, 6.6vw, 6.25rem);
  --ptp-fs-statement: clamp(3rem, 7.5vw, 7rem);
  --ptp-fs-card: clamp(2rem, 2.4vw, 2.3rem);
  --ptp-fs-h3: clamp(1.6rem, 3vw, 2.4rem);
  --ptp-fs-body: 1rem;          /* 16px running copy */
  --ptp-fs-small: .875rem;      /* 14px: the floor for running copy */
  --ptp-fs-eyebrow: .75rem;     /* 12px: the floor for any meaningful text */
  --ptp-fs-ui: .8125rem;        /* 13px nav and buttons */
  --ptp-lh-display: .82;

  /* Space */
  --ptp-space-1: 4px; --ptp-space-2: 8px; --ptp-space-3: 12px; --ptp-space-4: 16px; --ptp-space-5: 20px; --ptp-space-6: 24px;
  --ptp-space-7: 32px; --ptp-space-8: 40px; --ptp-space-9: 56px; --ptp-space-10: 72px; --ptp-space-11: 96px; --ptp-space-12: 120px;
  --ptp-space-section: clamp(80px, 11vw, 150px);   /* FlexWork 150px desktop */
  --ptp-gutter: max(16px, 5vw);       /* 5% sides */
  --ptp-wrap: 1280px;

  /* Radius */
  --ptp-radius-card: 20px;
  --ptp-radius-tile: 18px;
  --ptp-radius-bar: 16px;
  --ptp-radius-image: 14px;
  --ptp-radius-control: 10px;
  --ptp-radius-pill: 999px;
  --ptp-radius-chip: 6px;

  /* Shadow */
  --ptp-shadow-card: 0 16px 45px rgba(0,0,0,.047);
  --ptp-shadow-card-hover: 0 17px 35px rgba(0,0,0,.075);
  --ptp-shadow-nav: 0 3px 7px rgba(0,0,0,.086);
  --ptp-shadow-dialog: 0 20px 100px rgba(0,0,0,.53);

  /* Motion */
  --ptp-dur-fast: .2s;
  --ptp-dur-base: .25s;
  --ptp-dur-slow: .45s;
  --ptp-ease: cubic-bezier(.2, .7, .2, 1);

  /* Focus (audit C 5.3): ink ring + yellow halo; on yellow surfaces ink ring + white halo */
  --ptp-focus-ring: 2px solid var(--ptp-color-ink);
  --ptp-focus-halo: 0 0 0 5px var(--ptp-color-yellow);
  --ptp-focus-halo-on-yellow: 0 0 0 5px var(--ptp-color-paper);
  --ptp-focus-ring-on-dark: 2px solid var(--ptp-color-paper);

  /* Layers */
  --ptp-z-nav: 1000;
  --ptp-z-menu: 990;
  --ptp-z-sticky: 980;
  --ptp-z-skip: 3000;
}