/* ---------------------------------------------------------------------------
   Two Jax sponsor portal — email stylesheet (Tailwind 4)

   Compiled separately from the app stylesheet and post-processed so that every
   declaration premailer-rails inlines is a LITERAL value. See README §2.

   Two hard rules when writing classes against this file:

   1. NO opacity modifiers (bg-snow/10, border-white/20). Tailwind 4 compiles
      those to color-mix(in oklab, ...), which no email client understands and
      the postcss chain does not flatten. Every translucent colour in the design
      already has a solid equivalent below — use it.
   2. NO flex, grid, gap, position or transform utilities. Layout is tables.
--------------------------------------------------------------------------- */

@import "tailwindcss/theme.css";
@import "tailwindcss/utilities.css" source(none);

/* Preflight is deliberately NOT imported — a reset is useless once everything
   is inlined, and it bloats what premailer has to chew through. */

@source "../../views/layouts/mailer.html.erb";
@source "../../views/mailers/**/*.erb";
@source "../../views/sponsor_mailer/**/*.html.erb";
@source "../../views/ops_mailer/**/*.html.erb";

@theme {
  /* --- spacing: px base so p-8 flattens to 32px, never rem ---------------- */
  --spacing: 4px;

  /* --- grounds ----------------------------------------------------------- */
  --color-ink: #1a1a1a;        /* page + body ground              */
  --color-jax: #262626;        /* raised card                     */
  --color-void: #121212;       /* wells, header, footer           */
  --color-plumcast: #211c2a;   /* advisory panel ground           */

  /* --- text -------------------------------------------------------------- */
  --color-snow: #f8f8f2;       /* primary                         */
  --color-dim: #c9c4bc;        /* lead paragraphs                 */
  --color-muted: #a9a39b;      /* secondary — 6.9:1 on ink        */
  --color-subtle: #8f8a83;     /* tertiary, >=13px only           */
  --color-faint: #6e6a64;      /* legal fine print only           */

  /* --- brand ------------------------------------------------------------- */
  --color-orange: #ff8400;       /* accent text and links         */
  --color-orange-soft: #cd7d29;  /* button fills                  */
  --color-orange-deep: #7a4a12;  /* button stroke                 */
  --color-lime: #bcd631;         /* live / paid signals only      */
  --color-plum-soft: #8d6cba;    /* advisory eyebrow              */

  /* --- solid stand-ins for the app's rgba() hairlines --------------------
     Pre-composited against the surface each one sits on. Alpha is avoided
     entirely: Outlook Windows renders rgba() borders as black.              */
  --color-hairline: #303030;        /* 10% snow over ink           */
  --color-hairline-card: #3b3b3b;   /* 10% snow over jax           */
  --color-hairline-void: #292929;   /* 10% snow over void          */
  --color-edge-plum: #3f2c59;       /* 35% plum over plumcast      */
  --color-edge-lime: #5b6523;       /* 40% lime over ink           */
  --color-edge-orange: #66421c;     /* 45% orange-soft over void   */
  --color-wash-lime: #232615;       /* 28% lime-deep over void     */

  /* --- type -------------------------------------------------------------- */
  --font-display: 'Space Grotesk', 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-body: 'Titillium Web', 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'Chakra Petch', Consolas, 'Courier New', monospace;

  /* px, not rem — Outlook converts rem unpredictably */
  --text-2xs: 10px;   --text-2xs--line-height: 14px;
  --text-xs: 11px;    --text-xs--line-height: 16px;
  --text-sm: 13px;    --text-sm--line-height: 20px;
  --text-base: 15px;  --text-base--line-height: 24px;
  --text-md: 16px;    --text-md--line-height: 26px;
  --text-lg: 17px;    --text-lg--line-height: 24px;
  --text-xl: 20px;    --text-xl--line-height: 26px;
  --text-2xl: 22px;   --text-2xl--line-height: 28px;
  --text-3xl: 32px;   --text-3xl--line-height: 38px;
  --text-4xl: 34px;   --text-4xl--line-height: 40px;
  --text-code: 44px;  --text-code--line-height: 52px;

  --tracking-telemetry: 0.16em;
  --tracking-code: 0.18em;

  --radius-panel: 4px;
  --radius-pill: 999px;
}

/* The telemetry label is used ~30 times across the three emails; one utility
   beats repeating four classes. Literal values, so it survives flattening. */
@utility telemetry {
  font-family: 'Chakra Petch', Consolas, 'Courier New', monospace;
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}