/* 1TAKE Studios: design tokens v2. "Shopee at 11.11."
   Every color in the product comes from here. No hardcoded colors elsewhere.

   Default theme is LIGHT. The landing page is light-only (see the
   [data-page="landing"] override at the bottom, which always wins). Dark
   theme is kept for the app and admin only, toggled by the app/admin
   themselves via document.documentElement.dataset.theme. */

:root {
  color-scheme: light;

  /* Neutral ramp */
  --ground: #F5F5F5;
  --surface: #FFFFFF;
  --inset: #EFEFEF;
  --ink: #111111;
  --ink-2: #3F3F46;
  --muted: #5F6B7A;
  --rule: #E5E7EB;

  /* The one saturated accent: red-orange, Shopee/TikTok Shop register */
  --accent: #F04E23;
  --accent-hover: #D63F17;
  --accent-soft: rgba(240, 78, 35, 0.10);
  --accent-ink: #FFFFFF;
  /* Accent for text under 18px: #F04E23 is 3.6:1 on white, this is 5.3:1 */
  --accent-text: #C43A14;
  /* v4 framed PDP: page backdrop behind the frame, and the gold "ratings / sold" pill */
  --page-bg: #F1E9E4;
  --gold-soft: #FDF6E4;
  --gold-ink: #6B4E0B;
  --gold-line: #F0DDA5;
  --good-on-ink: #9EE2BE;

  /* Flash/mall badge: yellow with ink text */
  --badge: #FFD400;
  --badge-ink: #111111;
  --badge-soft: rgba(255, 212, 0, 0.16);

  /* Text links only (never the CTA accent) */
  --link: #1A73E8;

  /* --sand is retired: aliased to the yellow badge so anything that still
     reads var(--sand) / var(--sand-soft) (old chip-sand, tier-card-studio,
     tag-tested, landing "sand" sections) renders in the v3 badge color
     without a find-and-replace across every file. */
  --sand: var(--badge);
  --sand-soft: var(--badge-soft);

  /* Status */
  --good: #0B7A4B;
  --warn: #C2410C;
  --bad: #B3261E;
  --good-soft: rgba(11, 122, 75, 0.10);
  --warn-soft: rgba(194, 65, 12, 0.10);
  --bad-soft: rgba(179, 38, 30, 0.10);

  /* Type */
  --font-display: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Plus Jakarta Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; /* prompt output only */

  /* Scale: 12 / 14 / 16 / 18 / 22 / 28 / 40, plus the price size. --fs-8 is
     kept as an alias of --fs-price for anything still reading it (h1, the
     old .hero-price) so headline and price sizing stay in lockstep. */
  --fs-1: 12px;
  --fs-2: 14px;
  --fs-3: 16px;
  --fs-4: 18px;
  --fs-5: 22px;
  --fs-6: 28px;
  --fs-7: 40px;
  --fs-price: 56px;
  --fs-8: var(--fs-price);

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.55;
  --track-label: 0.08em;
  --measure: 65ch;

  /* Radius, spent by role. Controls and cards are properly rounded now;
     buttons and small pickers go all the way to a pill. */
  --r-control: 12px;
  --r-pill: 999px;
  --r-panel: 16px;
  --r-tag: 6px;

  /* Space (4px base): unchanged as a general layout scale. Section rhythm
     itself is halved via --section-y below, not this whole scale. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* Section vertical rhythm: dense, marketplace-style. 24px mobile, 32px
     from tablet up (see the min-width override below). */
  --section-y: 24px;

  /* Buttons: pill, 52px on touch */
  --btn-h: 52px;

  /* Elevation */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-float: 0 12px 32px rgba(0, 0, 0, 0.14);
  /* Back-compat alias: anything still reading --shadow-panel gets the float
     elevation (sheets, popovers, toasts, floating chrome). */
  --shadow-panel: var(--shadow-float);

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --t-hover: 120ms;
  --t-assemble: 600ms;

  /* Layout */
  --bp-tablet: 768px;
  --bp-desktop: 1180px;
  --tap-min: 44px;
  --focus-ring: 0 0 0 2px var(--ground), 0 0 0 4px var(--accent);
}

@media (min-width: 768px) {
  :root {
    --section-y: 32px;
  }
}

/* ---------------------------------------------------------------------
   Dark theme: app and admin only. The landing never reads these; see the
   [data-page="landing"] block at the end of this file, which is written to
   out-rank both of these selectors.
   --------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #101114;
    --surface: #17181C;
    --inset: #1E1F24;
    --ink: #F0F0F2;
    --ink-2: #B4B6BE;
    --muted: #7C7E87;
    --rule: #2A2C33;
    --accent: #FF6A45;
    --accent-hover: #FF8563;
    --accent-soft: rgba(255, 106, 69, 0.16);
    --accent-ink: #1A0A05;
    --badge: #F0C23F;
    --badge-ink: #1A1500;
    --badge-soft: rgba(240, 194, 63, 0.18);
    --link: #7AA7F0;
    --good: #3FBF85;
    --warn: #F0844B;
    --bad: #F0706A;
    --good-soft: rgba(63, 191, 133, 0.14);
    --warn-soft: rgba(240, 132, 75, 0.14);
    --bad-soft: rgba(240, 112, 106, 0.14);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-float: 0 12px 32px -12px rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #101114;
  --surface: #17181C;
  --inset: #1E1F24;
  --ink: #F0F0F2;
  --ink-2: #B4B6BE;
  --muted: #7C7E87;
  --rule: #2A2C33;
  --accent: #FF6A45;
  --accent-hover: #FF8563;
  --accent-soft: rgba(255, 106, 69, 0.16);
  --accent-ink: #1A0A05;
  --badge: #F0C23F;
  --badge-ink: #1A1500;
  --badge-soft: rgba(240, 194, 63, 0.18);
  --link: #7AA7F0;
  --good: #3FBF85;
  --warn: #F0844B;
  --bad: #F0706A;
  --good-soft: rgba(63, 191, 133, 0.14);
  --warn-soft: rgba(240, 132, 75, 0.14);
  --bad-soft: rgba(240, 112, 106, 0.14);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-float: 0 12px 32px -12px rgba(0, 0, 0, 0.6);
}

/* ---------------------------------------------------------------------
   The landing is light-only, always. This selector is written to beat both
   dark blocks above at equal specificity by source order, and the landing
   page never sets data-theme in the first place; this is the safety net.
   --------------------------------------------------------------------- */
:root[data-page="landing"] {
  color-scheme: light;
  --ground: #F5F5F5;
  --surface: #FFFFFF;
  --inset: #EFEFEF;
  --ink: #111111;
  --ink-2: #3F3F46;
  --muted: #5F6B7A;
  --rule: #E5E7EB;
  --accent: #F04E23;
  --accent-hover: #D63F17;
  --accent-soft: rgba(240, 78, 35, 0.10);
  --accent-ink: #FFFFFF;
  --badge: #FFD400;
  --badge-ink: #111111;
  --badge-soft: rgba(255, 212, 0, 0.16);
  --link: #1A73E8;
  --good: #0B7A4B;
  --warn: #C2410C;
  --bad: #B3261E;
  --good-soft: rgba(11, 122, 75, 0.10);
  --warn-soft: rgba(194, 65, 12, 0.10);
  --bad-soft: rgba(179, 38, 30, 0.10);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-float: 0 12px 32px rgba(0, 0, 0, 0.14);
}