/* ============================================================================
   tiporsub brand system
   ----------------------------------------------------------------------------
   Two colour roles that must not be confused:

     --brand*    the platform. Jade. Fixed everywhere, forever. Nav, dashboards,
                 platform buttons, emails. This is tiporsub speaking.
     --accent    the creator. Set per page from their own chosen colour, and it
                 only ever tints the things that are theirs: their page header,
                 their pay button, their embed. This is the creator speaking.

   Never paint platform chrome with --accent, and never paint a creator's pay
   button with --brand. The whole point is that a supporter is paying a person,
   not a website.
   ============================================================================ */

:root {
  /* ---- brand constants (never themed, never overridden) ---- */
  --brand-jade-700: #0A4F3F;
  --brand-jade-600: #0F6E58;   /* primary */
  --brand-jade-500: #14876B;
  --brand-jade-400: #4FC3A1;   /* the dark-mode voice of jade */
  --brand-jade-50:  #DCEFE8;

  --brand-apricot:     #EE9A4D;   /* warmth, the orbit, the default creator accent */
  --brand-apricot-600: #C97A2E;
  --brand-apricot-50:  #FDF0E2;

  /* ---- semantic, themed below ---- */
  --brand: var(--brand-jade-600);
  --brand-ink: #FFFFFF;          /* text that sits on --brand */
  --brand-soft: var(--brand-jade-50);
  --brand-soft-ink: var(--brand-jade-700);

  --bg: #FCFAF6;                 /* warm paper, never pure white */
  --surface: #FFFFFF;
  --surface-2: #F4EFE6;
  --ink: #1B1714;                /* warm near-black, never #000 */
  --ink-2: #57504A;
  --ink-3: #8A8179;
  --line: #E7DFD3;
  --line-strong: #D8CDBB;

  --good: #0F6E58;
  --warn: #8A5A10;
  --bad: #B23A32;

  /* the creator's colour. Overridden per page by applyAccent(). */
  --accent: var(--brand-apricot);
  --accent-ink: #2A1B0B;

  /* ---- type ---- */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --text-xs: .75rem;
  --text-sm: .8125rem;
  --text-base: .9375rem;   /* 15px — the reading size */
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.875rem;
  --text-3xl: 2.375rem;
  --text-4xl: clamp(2.125rem, 5.5vw, 3.25rem);

  --track-display: -.035em;   /* headlines pull in */
  --track-tight: -.015em;
  --track-wide: .06em;        /* eyebrows and small caps open up */

  --weight-body: 400;
  --weight-medium: 500;
  --weight-semi: 600;
  --weight-bold: 680;

  /* ---- shape ---- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* Shadows are warm — a neutral grey shadow on warm paper looks like dirt. */
  --shadow-sm: 0 1px 2px rgba(50, 36, 20, .05);
  --shadow: 0 1px 2px rgba(50, 36, 20, .05), 0 8px 22px -12px rgba(50, 36, 20, .22);
  --shadow-lg: 0 2px 4px rgba(50, 36, 20, .05), 0 24px 58px -22px rgba(50, 36, 20, .3);
  --shadow-brand: 0 8px 24px -10px color-mix(in srgb, var(--brand) 45%, transparent);

  /* ---- motion: quick, never bouncy for money ---- */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --fast: 120ms;
  --med: 200ms;

  /* a soft warm bloom for hero areas */
  --bloom: radial-gradient(120% 90% at 15% 0%,
              color-mix(in srgb, var(--brand-apricot) 22%, transparent) 0%,
              transparent 62%),
           radial-gradient(90% 80% at 92% 8%,
              color-mix(in srgb, var(--brand-jade-400) 20%, transparent) 0%,
              transparent 58%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: var(--brand-jade-400);
    --brand-ink: #05231C;
    --brand-soft: #14312A;
    --brand-soft-ink: var(--brand-jade-400);

    --bg: #14120F;
    --surface: #1D1A16;
    --surface-2: #262119;
    --ink: #F6F1E8;
    --ink-2: #B6ADA1;
    --ink-3: #857C71;
    --line: #332D25;
    --line-strong: #443C31;

    --good: var(--brand-jade-400);
    --warn: #E0A24F;
    --bad: #F09A91;

    --accent: #F2AE68;
    --accent-ink: #2A1B0B;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 8px 22px -12px rgba(0, 0, 0, .75);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, .45), 0 24px 58px -22px rgba(0, 0, 0, .85);
  }
}

:root[data-theme="dark"] {
  --brand: var(--brand-jade-400);
  --brand-ink: #05231C;
  --brand-soft: #14312A;
  --brand-soft-ink: var(--brand-jade-400);

  --bg: #14120F;
  --surface: #1D1A16;
  --surface-2: #262119;
  --ink: #F6F1E8;
  --ink-2: #B6ADA1;
  --ink-3: #857C71;
  --line: #332D25;
  --line-strong: #443C31;

  --good: var(--brand-jade-400);
  --warn: #E0A24F;
  --bad: #F09A91;

  --accent: #F2AE68;
  --accent-ink: #2A1B0B;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 8px 22px -12px rgba(0, 0, 0, .75);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, .45), 0 24px 58px -22px rgba(0, 0, 0, .85);
}

/* ============================================================ the logo lockup */

.brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  color: var(--ink);
}

.brand-mark {
  width: 26px;
  height: 26px;
  flex: none;
  display: block;
}

/* The wordmark. The apricot "or" is not decoration — it is what makes three
   syllables readable as one word. It is part of the logo; do not drop it. */
.brand-word {
  font-weight: var(--weight-bold);
  font-size: 1.1875rem;
  letter-spacing: var(--track-display);
  line-height: 1;
}
.brand-word i {
  font-style: normal;
  color: var(--brand-apricot);
}

.brand-lg .brand-mark { width: 36px; height: 36px; }
.brand-lg .brand-word { font-size: 1.5rem; }

/* ================================================================ type helpers */

.display {
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-display);
  line-height: 1.08;
}

.eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-3);
}