/* brand.css — Convertica Studio brand foundation.
   The one place the brand is defined. cts.css (embedded app) and app.css
   (pre-install pages) both consume these tokens; neither redefines them.

   Mirrors converticaweb/html-design/design-system.md. If a value changes
   there, change it here — that file is the source of truth for the brand,
   this file is the source of truth for the app.

   Self-hosted fonts: shared hosting has no external font hosts, and the
   embedded app must not reach out to a third party from inside the Shopify
   admin. Two families, no third — Clash Display 600 for display, Inter for
   everything else. */

@font-face {
  font-family: "Clash Display";
  src: url("fonts/ClashDisplay-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- The five brand tokens ------------------------------------------
     Straight from design-system.md. Nothing else here is "the brand". */
  --brand-accent: #FF6333;   /* Convertica orange */
  --brand-ink:    #0B0B0C;   /* near-black — text, dark surfaces, primary buttons */
  --brand-muted:  #71717A;   /* secondary text, labels, metadata */
  --brand-line:   #E7E4DF;   /* hairline borders, warm not grey */
  --brand-alt:    #F7F6F3;   /* warm bone — alternating section background */

  /* ---- Accent, contrast-corrected -------------------------------------
     The orange is a 2.96:1 colour on white. That is below the 4.5:1 floor
     for text AND below the 3:1 floor for a meaningful graphic, so it can
     only ever be a fill or a decorative mark — never text, and never a
     fill with white on top of it.

     Two derived tokens do the work the raw orange cannot:
       --brand-accent-strong  the orange darkened until it passes as text
                              (5.18:1 on white, 4.79:1 on --brand-alt)
       --brand-on-accent      what goes ON the raw orange: ink, at 6.64:1.
                              White would be 2.96:1, which is why the site's
                              own white-on-orange hover is not copied here. */
  --brand-accent-strong: #C2410C;
  --brand-on-accent:     #0B0B0C;
  --brand-accent-tint:   #FFF1EC;
  --brand-accent-line:   #F6C6B2;

  /* ---- Body-copy ramp, from the design system's literal table ---------- */
  --brand-copy: #27272A;   /* long-form body on light */
  --brand-list: #3F3F46;   /* dense body, list items */
  --brand-body: #52525B;   /* the most-used body colour */
  --brand-error: #C2410C;  /* the only functional colour on the site */
  --brand-ink-hover: #16161A;
  --brand-card-hover: #FAFAF9;

  /* ---- Type ------------------------------------------------------------ */
  --brand-font-display: "Clash Display", "Inter", -apple-system,
                        BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --brand-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                     Roboto, Helvetica, Arial, sans-serif;

  /* Display tracking, per the design system's type table. */
  --brand-ls-display: -0.04em;
  --brand-ls-heading: -0.03em;
  --brand-ls-eyebrow: 0.18em;

  /* ---- Motion ---------------------------------------------------------- */
  --brand-ease-standard: cubic-bezier(.2, .7, .3, 1);
  --brand-ease-soft:     cubic-bezier(.2, .6, .2, 1);
}

/* ==========================================================================
   The logo lockup — orb + wordmark, in markup rather than an image.

   The site draws the orb with a looping <video>. That is 100 KB and it is
   not appropriate inside the Shopify admin iframe, where this app is a guest
   and every request is on the merchant's connection. The mark is a solid
   orange circle, so CSS reproduces it exactly at any size, in any theme,
   for nothing.

   Radius 0 is the rule everywhere in this system; the orb is the documented
   exception, along with toggle thumbs.
   ========================================================================== */

.cts-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--brand-font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.06;
  color: inherit;
  text-decoration: none;
}

.cts-logo__orb {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: var(--brand-accent);
}

.cts-logo__words { display: flex; flex-direction: column; }
.cts-logo__words span { display: block; }

/* The second line is the quieter half of the lockup, exactly as on the site. */
.cts-logo__sub { color: var(--brand-muted); }

.cts-logo--sm { gap: 8px; font-size: 15px; }
.cts-logo--sm .cts-logo__orb { width: 22px; height: 22px; }
.cts-logo--lg { gap: 12px; font-size: 20px; }
.cts-logo--lg .cts-logo__orb { width: 34px; height: 34px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}