/* ========================================================================== 
   Phillips360 Modern V2.033 — design tokens
   --------------------------------------------------------------------------
   This file is the visual system's single source of truth.

   Safe modification order:
   1. Brand colors: --p360-accent, --p360-accent-2, --p360-ink, --p360-paper.
   2. Semantic colors: change only when contrast has been re-tested.
   3. Type scale: adjust the --p360-type-* clamp values, not component files.
   4. Density: use Appearance > Customize instead of changing section files.
   5. Shape/elevation: use the Card finish setting or the tokens below.

   Accessibility guardrails:
   - --p360-accent-strong is for small orange text on light backgrounds.
   - --p360-text-dark-muted and --p360-text-light-muted pass AA at body sizes
     against the default light and dark surfaces.
   ========================================================================== */

:root {
  /* Brand palette --------------------------------------------------------- */
  --p360-accent: #ff5d3a;
  --p360-accent-strong: #b8331b;
  --p360-accent-strong: color-mix(in srgb, var(--p360-accent) 68%, #000);
  --p360-accent-2: #c8f75f;
  --p360-ink: #08111a;
  --p360-ink-soft: #152330;
  --p360-paper: #f4f1ea;
  --p360-white: #fff;

  /* Semantic surfaces and text ------------------------------------------ */
  --p360-surface-light: var(--p360-paper);
  --p360-surface-raised: #fff;
  --p360-surface-subtle: #ebe8e1;
  --p360-surface-dark: var(--p360-ink);
  --p360-surface-dark-raised: #111d28;
  --p360-text-dark: var(--p360-ink);
  --p360-text-dark-muted: #4f5963;
  --p360-text-light: #f7f8fa;
  --p360-text-light-muted: #c7d0d8;
  --p360-muted: var(--p360-text-dark-muted);
  --p360-line: rgba(8, 17, 26, .17);
  --p360-line-strong: rgba(8, 17, 26, .28);
  --p360-line-light: rgba(255, 255, 255, .2);

  /* High-contrast conversion controls.
     These are intentionally semantic rather than tied to the editable accent,
     so a dark accent choice cannot create black-on-black submit buttons. */
  --p360-submit-background: #08111a;
  --p360-submit-text: #fff;
  --p360-submit-hover-background: #152330;
  --p360-submit-hover-text: #fff;

  /* Layout and spacing --------------------------------------------------- */
  --p360-max: 1360px;
  --p360-reading-width: 70ch;
  --p360-gutter: clamp(20px, 4vw, 64px);
  --p360-space-1: clamp(12px, 1vw, 18px);
  --p360-space-2: clamp(20px, 2vw, 32px);
  --p360-space-3: clamp(32px, 4vw, 64px);
  --p360-space-4: clamp(64px, 8vw, 128px);
  --p360-section-space: var(--p360-space-4);
  --p360-component-gap: clamp(18px, 2.6vw, 36px);

  /* Typography ----------------------------------------------------------- */
  --p360-font-display: "Avenir Next", "Segoe UI Variable Display", "Helvetica Neue", Arial, sans-serif;
  --p360-font-body: Inter, "Segoe UI Variable Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --p360-type-display: clamp(3.75rem, 8.4vw, 9.4rem);
  --p360-type-h1: clamp(3.25rem, 7.4vw, 8rem);
  --p360-type-h2: clamp(2.65rem, 5.8vw, 6.5rem);
  --p360-type-h3: clamp(1.75rem, 3vw, 3.25rem);
  --p360-type-h4: clamp(1.3rem, 2vw, 1.8rem);
  --p360-type-body-lg: clamp(1.05rem, 1.35vw, 1.3rem);
  --p360-type-body: clamp(1rem, 1.05vw, 1.125rem);
  --p360-type-small: .875rem;
  --p360-type-label: .75rem;
  --p360-leading-display: .96;
  --p360-leading-heading: 1.04;
  --p360-leading-body: 1.68;
  --p360-tracking-display: -.052em;
  --p360-tracking-label: .12em;

  /* Shape and elevation -------------------------------------------------- */
  --p360-radius-sm: 14px;
  --p360-radius: 24px;
  --p360-radius-lg: 42px;
  --p360-control-radius: 999px;
  --p360-control-height: 56px;
  --p360-shadow-sm: 0 14px 40px rgba(3, 5, 9, .08);
  --p360-shadow: 0 32px 90px rgba(3, 5, 9, .16);
  --p360-card-background: rgba(255, 255, 255, .66);
  --p360-card-border: var(--p360-line);
  --p360-card-shadow: var(--p360-shadow-sm);

  /* Motion --------------------------------------------------------------- */
  --p360-ease: cubic-bezier(.2, .75, .2, 1);
  --p360-duration-fast: 180ms;
  --p360-duration-standard: 420ms;
  --p360-duration-cinematic: 780ms;
  --p360-focus-ring: 0 0 0 4px rgba(255, 93, 58, .28);
}

/* Visual-density options. The Customizer sets one class on <body>. */
body.p360-density-compact { --p360-section-space: clamp(48px, 6vw, 88px); --p360-component-gap: clamp(14px, 2vw, 26px); }
body.p360-density-balanced { --p360-section-space: var(--p360-space-4); }
body.p360-density-generous { --p360-section-space: clamp(80px, 10vw, 156px); --p360-component-gap: clamp(24px, 3vw, 46px); }

/* Card-finish options. Outlined is quiet, Soft is default, Elevated is bold. */
body.p360-cards-outlined { --p360-card-background: transparent; --p360-card-shadow: none; }
body.p360-cards-soft { --p360-card-background: rgba(255, 255, 255, .66); --p360-card-shadow: var(--p360-shadow-sm); }
body.p360-cards-elevated { --p360-card-background: #fff; --p360-card-shadow: var(--p360-shadow); }