/* Panodock — design tokens
   Single source of truth. Every value below is used by at least one shipped screen.
   Do not add a colour here that is not already on a screen. */

:root {
  /* ---- surfaces (light theme is the only theme) ---- */
  --pd-page:        #F4F5F8;  /* app + marketing ground */
  --pd-sunken:      #EDEEF3;  /* inset panels, meters, quiet blocks */
  --pd-card:        #FFFFFF;  /* every card, sidebar, topbar */
  --pd-field:       #F8F9FB;  /* input resting fill inside a white card */
  --pd-dark:        #0C0C12;  /* dark island: viewer, AI widget, quote panel */
  --pd-dark-2:      #0F0F16;  /* raised surface inside a dark island */
  --pd-dark-3:      #15151C;  /* chat bubble on dark */

  /* ---- ink. CHOOSE BY GROUND, NOT BY ROLE. See --pd-ink-* notes. ---- */
  --pd-ink:         #17181D;  /* headings + body on light. 15.4:1 on white */
  --pd-ink-2:       #52545F;  /* body-secondary anywhere on light; ALSO the
                                 required step for <=12px labels on any tinted
                                 ground (#F4F5F8 6.30:1, #EDEEF3 6.49:1) */
  --pd-ink-3:       #6E7080;  /* <=12px labels ON #FFFFFF ONLY. 4.62:1 */
  --pd-ink-4:       #9A9CA8;  /* rules + decorative glyphs on light — NEVER text.
                                 On #0C0C12 the scale inverts: this becomes the
                                 correct label ink (7.18:1) and ink-3 fails. */
  --pd-line:        rgba(20, 22, 34, 0.07); /* card + section borders */
  --pd-line-strong: rgba(20, 22, 34, 0.13); /* button + field borders */

  /* ---- brand. three tones, used as one ramp across the camera glyphs ---- */
  --pd-brand-700:   #1D4ED8;  /* deepest: first o, links, icon strokes on light */
  --pd-brand-600:   #2563EB;  /* base: primary fill, second o, focus ring */
  --pd-brand-500:   #3B82F6;  /* lightest: the c, and the whole mark on dark */
  --pd-brand-300:   #93C5FD;  /* chart secondary, code text on dark */
  --pd-brand-tint:  rgba(37, 99, 235, 0.09); /* active nav, quiet brand chip */

  /* ---- status. each has a light-ground value and a tint-ground value ---- */
  --pd-live:        #10DC8C;  /* the dot only, never text */
  --pd-live-ink:    #0B8F5D;  /* on #FFFFFF */
  --pd-live-ink-2:  #0A7A50;  /* on the 10% live tint — 4.6:1 */
  --pd-danger:      #C2415A;
  --pd-danger-ink:  #A32E45;  /* text + icon */
  --pd-danger-bg:   #FBF1F3;
  --pd-warn-ink:    #8A5209;
  --pd-warn-bg:     rgba(217, 119, 6, 0.08);

  /* ---- type ---- */
  --pd-font-display: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pd-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pd-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --pd-h1: 700 28px/1.1 var(--pd-font-display);
  --pd-h2: 700 21px/1.2 var(--pd-font-display);
  --pd-h3: 600 16px/1.3 var(--pd-font-display);
  --pd-metric: 700 26px/1 var(--pd-font-display);
  --pd-body: 400 14px/1.5 var(--pd-font-body);
  --pd-body-sm: 400 13px/1.55 var(--pd-font-body);
  /* eyebrow: the one typographic accent. mono, 10px, 0.16em, uppercase. */
  --pd-eyebrow-size: 10px;
  --pd-eyebrow-track: 0.16em;
  --pd-meta-track: 0.05em;   /* mono metadata inside cards, 10.5px */

  /* ---- space. 4px base, density 5/10 ---- */
  --pd-1: 4px;  --pd-2: 8px;  --pd-3: 12px; --pd-4: 16px;
  --pd-5: 20px; --pd-6: 24px; --pd-8: 32px; --pd-10: 40px; --pd-14: 56px;

  /* ---- radius ---- */
  --pd-r-card:  16px;
  --pd-r-modal: 20px;
  --pd-r-field: 10px;
  --pd-r-chip:  999px;
  --pd-r-btn:   999px;
  --pd-r-icon:  12px;   /* icon tile */
  --pd-r-thumb: 7px;    /* scene thumbnail */

  /* ---- elevation. cards get a border, not a shadow. ---- */
  --pd-shadow-card:  0 2px 8px rgba(20, 22, 34, 0.04);
  --pd-shadow-btn:   0 8px 24px -8px rgba(20, 22, 34, 0.5);
  --pd-shadow-hover: 0 16px 34px -14px rgba(20, 22, 34, 0.34);
  --pd-shadow-modal: 0 30px 70px -20px rgba(20, 22, 34, 0.5);
  --pd-shadow-brand: 0 18px 40px -18px rgba(37, 99, 235, 0.4);
  --pd-scrim:        rgba(12, 12, 18, 0.55);

  /* ---- layout ---- */
  --pd-sidebar: 232px;
  --pd-topbar:  60px;
  --pd-max:     1180px;
  --pd-max-marketing: 1200px;

  --pd-focus: 0 0 0 3px rgba(37, 99, 235, 0.1);
}