/* =============================================================================
   PRESNT — design tokens, ported 1:1 from the iOS app.

   Source of truth: JustUSApp/Views/Present/PresentTheme.swift
   Every value below is the same number/hex as its Swift counterpart, so the
   guest web app and the host app are literally the same design system.
   If PresentTheme.swift changes, change this file in the same commit.
   ========================================================================== */

:root {
  /* Drives native form controls, scrollbars and the URL bar tint. */
  color-scheme: light;

  /* --- Colors (PresentTheme.Colors) -------------------------------------

     PAPER IS THE DEFAULT SURFACE. The app made this move first: every screen
     that is not sitting on top of live camera is off-white paper with near-
     black ink, and the semantic tokens below resolve to that everywhere.

     Over-camera surfaces flip back to white-on-black by adding `.on-media`,
     which redefines the SAME semantic names further down. That is the exact
     shape of `presentChip(onPaper:)` and `PresentPillButtonStyle(onPaper:)`
     in Swift — one set of names, two surfaces, chosen by context rather than
     by the author remembering which colour to reach for.

     Red is reserved. It means LIVE and it means nothing else. A red button
     that is not about being live is how that stops being true, so primary
     CTAs are ink even when they are the loudest thing on the screen.
     --------------------------------------------------------------------- */

  /* Raw palette — the only literal colours in the system. */
  --p-paper: #eae2d4;               /* Color(hex: 0xEAE2D4) */
  --p-ink: #0a0a0c;                 /* Color(hex: 0x0A0A0C) */
  --p-near-black: #0f0f11;          /* Color(hex: 0x0F0F11) app chrome */
  --p-live-red: #ff3b30;            /* LIVE state only — non-text uses */
  --p-live-red-deep: #d70015;       /* fills under small white text (AA) */
  --p-highlight: #ffd60a;           /* Color.yellow — dark surfaces only */

  /* Ink washes (PresentTheme paperInk* family). */
  --p-ink-secondary: rgba(10, 10, 12, 0.62);
  --p-ink-hairline: rgba(10, 10, 12, 0.12);
  --p-ink-fill: rgba(10, 10, 12, 0.06);
  --p-ink-fill-strong: rgba(10, 10, 12, 0.11);

  /* --- Semantic tokens — resolve to PAPER by default ---------------------- */
  --p-background: var(--p-paper);
  --p-surface: #000000;             /* full-bleed media surface stays black */
  --p-accent: var(--p-ink);         /* purple is retired on paper */

  --p-text-primary: var(--p-ink);
  --p-text-secondary: var(--p-ink-secondary);
  --p-icon-muted: var(--p-ink-secondary);

  --p-stroke-soft: rgba(10, 10, 12, 0.3);
  --p-hairline: var(--p-ink-hairline);
  --p-control-fill: var(--p-ink-fill);
  --p-chip-fill: var(--p-ink-fill);
  --p-avatar-fallback: var(--p-ink);
  --p-avatar-initial: var(--p-paper);
  --p-field-fill: var(--p-ink-fill);
  --p-placeholder-text: rgba(10, 10, 12, 0.38);

  --p-pill-bg: var(--p-ink-fill);
  --p-pill-ink: var(--p-ink);       /* primary CTA fill — ink, never red */
  --p-pill-ink-label: var(--p-paper);

  --p-scrim: rgba(0, 0, 0, 0.5);
  --p-text-shadow: rgba(0, 0, 0, 0.5);
  --p-pill-shadow: rgba(10, 10, 12, 0.18);
  --p-knock-dim: rgba(0, 0, 0, 0.4);

  /* Notice banners. On paper a 12% wash is invisible, so notices carry a
     solid leading rule and an ink body instead of a tinted background. */
  /* The focus indicator has to win on whichever surface it lands on. */
  --p-focus-ring: var(--p-ink);

  --p-notice-fill: var(--p-ink-fill);
  --p-notice-rule: var(--p-ink);
  --p-notice-rule-alert: var(--p-live-red-deep);

  /* TEST MODE — the backend is running simulated payments.
     The one alarming surface in PRESNT that is NOT about being live. It
     borrows the deep red because that red already exists for white text at AA,
     and inventing a second alarm colour would dilute both. Deliberately its own
     token name so the distinction stays legible: red here means "this money is
     not real", not "someone is on camera". */
  --p-testmode-bg: var(--p-live-red-deep);
  --p-testmode-label: #ffffff;

  --p-placeholder-bright: #242424;  /* camera placeholders — media only */
  --p-placeholder-dark: #0f0f0f;
  --p-self-bright: #2e2e2e;
  --p-self-dark: #141414;

  /* Elevated card fill. On paper this is a wash, not a lighter black. */
  --p-card: var(--p-ink-fill);
  --p-card-2: var(--p-ink-fill-strong);

  /* --- Spacing (PresentTheme.Spacing) ----------------------------------- */
  --p-xs: 4px;
  --p-s: 8px;
  --p-m: 12px;
  --p-l: 16px;
  --p-xl: 24px;
  --p-card-edge: 20px;
  --p-media-edge: 24px;
  --p-screen-bottom: 48px;
  --p-pill-h: 14px;
  --p-pill-v: 10px;
  --p-chip-h: 12px;
  --p-chip-v: 6px;
  --p-call-top-clearance: 72px;
  --p-call-bottom-clearance: 116px;

  /* --- Radii (PresentTheme.Radii) --------------------------------------- */
  --p-r-card: 28px;
  --p-r-thumb: 6px;
  --p-r-screen: 44px;
  --p-r-self: 22px;
  --p-ring-width: 5px;
  --p-hairline-width: 1px;
  --p-avatar-ring-width: 4px;

  /* --- Sizes (PresentTheme.Sizes) --------------------------------------- */
  --p-avatar-small: 32px;
  --p-avatar-large: 112px;
  --p-tap: 44px;                    /* HIG minimum hit target */
  --p-end-call: 56px;
  --p-live-dot: 8px;
  --p-self-w: 96px;
  --p-self-h: 138px;
  --p-hero-money: 56px;

  /* --- Shadows (PresentTheme.Shadows) ----------------------------------- */
  --p-shadow-floating: 0 6px 12px var(--p-pill-shadow);

  /* --- Type scale (PresentTheme.Fonts — iOS text styles at default size) - */
  --p-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --p-font-rounded: ui-rounded, "SF Pro Rounded", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --p-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --p-t-display: 700 28px/1.15 var(--p-font);   /* .title bold */
  --p-t-title: 700 22px/1.2 var(--p-font);      /* .title2 bold */
  --p-t-headline: 600 17px/1.3 var(--p-font);   /* .headline */
  --p-t-body: 600 15px/1.4 var(--p-font);       /* .subheadline semibold */
  --p-t-label: 500 13px/1.35 var(--p-font);     /* .footnote medium */
  --p-t-caption: 500 12px/1.35 var(--p-font);   /* .caption medium */
  --p-t-countdown: 600 17px/1 var(--p-font);    /* .body semibold monospaced digits */

  /* --- Animation (PresentTheme.Animations) ------------------------------ */
  --p-quick: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --p-fade: 500ms cubic-bezier(0.2, 0, 0.2, 1);
  --p-spring: 350ms cubic-bezier(0.22, 1.2, 0.36, 1);


  /* --- Avatar fallback ---------------------------------------------------
     These were four loud gradients (purple/amber/pink/blue) carried over from
     JustUS. They are a fallback for "this host has no photo yet", and a
     fallback should not be the loudest object on the page — in the join
     screenshot the blue disc outranked the host's own name. On paper the
     fallback is ink, and the person is identified by their initial. The seed
     hooks stay so a per-host treatment can return without touching markup.
     --------------------------------------------------------------------- */
  --p-avatar-0: var(--p-ink);
  --p-avatar-1: var(--p-ink);
  --p-avatar-2: var(--p-ink);
  --p-avatar-3: var(--p-ink);

  /* --- Gradients --------------------------------------------------------- */
  --p-bottom-scrim: linear-gradient(to bottom, transparent, var(--p-scrim));
  --p-rim: conic-gradient(
    from 0deg,
    var(--p-live-red),
    var(--p-ink),
    var(--p-live-red)
  );
}

/* =============================================================================
   OVER-MEDIA SURFACES

   `.on-media` redefines the semantic tokens above for anything sitting on top
   of live camera, where paper would be a hole punched in the video. Only the
   call screen needs it — every other guest surface is paper, which is also
   true of the app (GuestWrapView is already `.background(paper)`).

   This is a token flip, not a second stylesheet: every component below reads
   the same variable names and simply resolves differently inside the scope.
   ========================================================================== */

.on-media {
  color-scheme: dark;

  --p-background: var(--p-surface);
  --p-accent: #ffffff;

  --p-text-primary: #ffffff;
  --p-text-secondary: rgba(255, 255, 255, 0.72);
  --p-icon-muted: rgba(255, 255, 255, 0.7);

  --p-stroke-soft: rgba(255, 255, 255, 0.3);
  --p-hairline: rgba(255, 255, 255, 0.12);
  --p-control-fill: rgba(255, 255, 255, 0.15);
  --p-chip-fill: rgba(255, 255, 255, 0.08);
  --p-avatar-fallback: rgba(255, 255, 255, 0.25);
  --p-avatar-initial: #ffffff;
  --p-field-fill: rgba(255, 255, 255, 0.06);
  --p-placeholder-text: rgba(255, 255, 255, 0.38);

  /* Color(white: 0.10, opacity: 0.92) — opaque enough that camera never
     bleeds through a control, which is the bug the app hit on the knock card. */
  --p-pill-bg: rgba(26, 26, 26, 0.92);
  --p-pill-ink: rgba(255, 255, 255, 0.95);
  --p-pill-ink-label: var(--p-ink);

  --p-pill-shadow: rgba(0, 0, 0, 0.4);

  --p-focus-ring: #ffffff;

  --p-notice-fill: rgba(255, 255, 255, 0.08);
  --p-notice-rule: #ffffff;

  --p-card: #17171a;
  --p-card-2: #1e1e22;

  /* The four gradients are retired here too. Keeping them on camera left the
     blue disc as the loudest object on the live pay sheet — the very thing
     that read as "still the old app". Over media the fallback is the app's
     own avatarFallback wash. */
  --p-avatar-0: var(--p-avatar-fallback);
  --p-avatar-1: var(--p-avatar-fallback);
  --p-avatar-2: var(--p-avatar-fallback);
  --p-avatar-3: var(--p-avatar-fallback);

  --p-rim: conic-gradient(
    from 0deg,
    var(--p-live-red),
    #ffffff,
    var(--p-live-red)
  );

  background: var(--p-surface);
  color: var(--p-text-primary);
}