/**
 * Preset CSS variable contract.
 *
 * Every Preset sets these variables on its root element (via PresetProvider).
 * All preset-system primitives read from these (not from the dashboard's tokens).
 *
 * The dashboard tokens (--bg, --fg, --accent, …) defined in
 * src/design-system/tokens/tokens.css are SEPARATE and stay constant.
 * Preset-scoped vars are prefixed --p- to avoid collision.
 *
 * Spec: /docs/PRESET_SYSTEM_PRD.md §3
 */

/* ── Defaults — overridden per Preset on a scoped root element ── */
[data-preset-root] {
  /* — Foreground — */
  --p-fg:                 #101828;
  --p-fg-muted:           #475467;
  --p-fg-subtle:          #667085;
  --p-fg-inverse:         #ffffff;

  /* — Surfaces — */
  --p-surface:            #ffffff;
  --p-surface-subtle:     #f9fafb;

  /* — Borders — */
  --p-border:             #e4e7ec;
  --p-border-strong:      #d0d5dd;

  /* — Accent — */
  --p-accent:             #ff5757;
  --p-accent-hover:       #ff7878;
  --p-accent-fg:          #ffffff;
  --p-accent-soft:        rgba(255, 87, 87, 0.12);
  --p-accent-border:      rgba(255, 87, 87, 0.32);

  /* — Radii (per primitive — Presets can tune these) — */
  --p-radius-card:        16px;
  --p-radius-button:      12px;
  --p-radius-input:       10px;
  --p-radius-chip:        9999px;
  --p-radius-avatar:      9999px;

  /* — Shadows — */
  --p-shadow-card:        0 1px 3px rgba(16, 24, 40, 0.08),
                          0 1px 2px rgba(16, 24, 40, 0.04);
  --p-shadow-card-hover:  0 8px 24px rgba(16, 24, 40, 0.12),
                          0 4px 8px rgba(16, 24, 40, 0.06);

  /* — Typography — */
  --p-font-headline:      'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --p-font-body:          'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --p-font-mono:          'JetBrains Mono', ui-monospace, Menlo, monospace;
  --p-headline-tracking:  -0.022em;
  --p-headline-style:     normal;

  /* — Text scale —
   *
   * Mobile-first FIXED sizes. The card is mostly viewed on a phone (NFC tap,
   * QR scan) — these sizes are tuned for that. They DO NOT auto-resize with
   * the card width: the same `--p-text-display` reads as 44px whether the
   * preview is 360px or 600px wide. The only knob that resizes everything is
   * `--p-text-scale` below — a single multiplier the user controls in the
   * Fine-tune drawer ("Type size: Compact / Default / Comfortable").
   *
   * Why fixed instead of container-query scaling: the user's mental model is
   * "this is what shows up on a phone." Container scaling made the same text
   * look different in editor preview vs the real device, which was confusing.
   * Fixed sizes + one global multiplier matches how Figma works.
   *
   * Per-preset overrides: each Preset can redefine specific tokens (e.g. an
   * editorial Preset bumps `--p-text-display` to 56px). The multiplier still
   * applies on top. */
  --p-text-scale:         1;            /* 0.92 compact · 1 default · 1.08 comfortable */

  --p-text-xs:            calc(11px * var(--p-text-scale));   /* tags, kickers */
  --p-text-sm:            calc(12px * var(--p-text-scale));   /* meta, captions */
  --p-text-base:          calc(14px * var(--p-text-scale));   /* body */
  --p-text-lg:            calc(16px * var(--p-text-scale));   /* sub-headings */
  --p-text-xl:            calc(18px * var(--p-text-scale));   /* small h3 */
  --p-text-2xl:           calc(22px * var(--p-text-scale));   /* h3 */
  --p-text-3xl:           calc(26px * var(--p-text-scale));   /* h2 */
  --p-text-4xl:           calc(32px * var(--p-text-scale));   /* h1 */
  --p-text-display:       calc(40px * var(--p-text-scale));   /* hero name — sized for a phone first */

  /* — Line height — paired with the scale above */
  --p-leading-tight:      1.15;
  --p-leading-snug:       1.3;
  --p-leading-normal:     1.5;
  --p-leading-relaxed:    1.65;

  /* — Spacing scale —
   * Same mobile-first + scale-multiplier story as text. Module layouts should
   * use these instead of raw `padding: 16` so density is consistent and
   * user-tunable in one place. */
  --p-space-scale:        1;            /* 0.85 dense · 1 default · 1.15 airy */

  --p-space-xs:           calc(4px  * var(--p-space-scale));
  --p-space-sm:           calc(8px  * var(--p-space-scale));
  --p-space-md:           calc(12px * var(--p-space-scale));
  --p-space-lg:           calc(16px * var(--p-space-scale));
  --p-space-xl:           calc(24px * var(--p-space-scale));
  --p-space-2xl:          calc(32px * var(--p-space-scale));
  --p-space-3xl:          calc(48px * var(--p-space-scale));

  /* — Motion — */
  --p-duration-base:      150ms;
  --p-duration-slow:      250ms;
  --p-ease:               cubic-bezier(0, 0, 0.2, 1);

  /* — Page background (set by PresetProvider for each variant) — */
  --p-bg:                 #f9fafb;
}

/* ── Respect prefers-reduced-motion across all Presets ── */
@media (prefers-reduced-motion: reduce) {
  [data-preset-root] {
    --p-duration-base: 0ms;
    --p-duration-slow: 0ms;
  }
}

.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}