/* ==========================================================================
   EasyScript Brand Tokens
   ==========================================================================
   Source of truth for the EasyScript identity. Import this file wherever
   the wordmark, tile, or ink-dark surface language is used.

   USAGE RULES (non-negotiable):
   - One filled accent button per view. Everything else is a ghost/secondary.
   - Ghost secondaries: transparent fill, 1px border (--es-border-2), text
     color (--es-text-soft). No competing filled buttons on one screen.
   - Mint (--es-mint) is reserved for money: paid/earnings/pricing/success
     states tied to currency. Never use mint for generic "success" (e.g. a
     saved-settings toast) — that dilutes its meaning. Use --es-text or
     --es-accent for non-monetary confirmations.
   - Borders over shadows. Depth is communicated with 1px borders
     (--es-border / --es-border-2), not box-shadow. The wordmark NEVER gets
     a drop shadow, ever, in any context.
   - Corner radius scale: 10% / 16% / 26% (percentage of the element's own
     box — matches CSS `border-radius: N%` behavior on square-ish elements
     like tiles/icons/chips). Use --es-radius-sm/md/lg. For non-square
     elements where percentage radius reads oddly, fall back to the pixel
     radii commented next to each token.
   - Type scale (px): 13 / 15 / 18 / 24 / 32 / 44 / 60.
     --es-text-xs / -sm / -md / -lg / -xl / -2xl / -3xl.

   WORDMARK RULES (see .es-wordmark below):
   - Always lowercase: "easyscript". Never "Easy Script" (no space), never
     "Easyscript" (capitalized).
   - Space Grotesk 700, letter-spacing -0.035em.
   - Color: #EDEFF7 (--es-text) on dark surfaces, #0B0E1A (--es-ink-deep) on
     light surfaces. NEVER render the wordmark in periwinkle (--es-accent) —
     that color is reserved for the cursor block and UI accents only.
   - Cursor block: solid --es-accent rect immediately after the last letter.
     gap 0.14em, width 0.33em, height 0.80em, radius 0.07em, baseline-aligned
     (the block's bottom edge sits on the text baseline, and it reads taller
     than the lowercase x-height by design — it's a caret, not a letter).
   - Blink is opt-in via .es-wordmark--blink (animated contexts only, e.g. a
     hero or splash). Static contexts (nav bars, footers, print/OG) render
     the cursor at full opacity, no animation.

   JUDGMENT CALLS MADE HERE (flagging for owner review, not hidden):
   - --es-accent-hi / --es-accent-lo were not specified beyond the two
     gradient stops (#7C86F5 → #5A63E8) used on the tile. I assigned
     --es-accent = #7C86F5 (base, matches cursor block exactly),
     --es-accent-hi = a lighter tint for hover/glow states, and
     --es-accent-lo = #5A63E8 (the darker gradient stop, for pressed states
     and as the gradient's second stop). Swap if the intended meaning of
     "hi/lo" was luminance-only rather than interaction-state.
   - --es-surface / --es-surface-2 / --es-border / --es-border-2 /
     --es-text-soft / --es-danger were not specified in the brand brief at
     all. Values below are reasonable ink-dark-UI defaults, not brief-
     mandated. --es-muted (#8A90B0) IS spec-mandated — it's the exact OG
     tagline color given in the brief.
   ========================================================================== */

:root {
  /* Surfaces */
  --es-ink: #070912;        /* deepest background — OG canvas, tile glyph ink */
  --es-ink-deep: #0B0E1A;   /* wordmark color on LIGHT backgrounds */
  --es-surface: #10131f;    /* card / panel background, one step up from ink */
  --es-surface-2: #171b2c;  /* elevated surface, two steps up from ink */

  /* Borders (depth via border, never shadow) */
  --es-border: rgba(237, 239, 247, 0.08);
  --es-border-2: rgba(237, 239, 247, 0.14);

  /* Text */
  --es-text: #edeff7;       /* wordmark color on DARK backgrounds; primary text */
  --es-text-soft: #c7cbde;  /* secondary text, ghost-button labels */
  --es-muted: #8a90b0;      /* tertiary text — spec-exact OG tagline color */

  /* Accent (periwinkle/indigo — cursor block + interactive accents) */
  --es-accent: #7c86f5;     /* cursor block color; gradient stop 1 */
  --es-accent-hi: #9aa2f8;  /* lighter tint — hover/focus glow */
  --es-accent-lo: #5a63e8;  /* deeper tint — gradient stop 2 / pressed state */

  /* Semantic (non-brand, use sparingly) */
  --es-mint: #3ecf8e;       /* MONEY ONLY: paid, earnings, price, payout success */
  --es-danger: #ff6b6b;     /* errors, destructive actions */
  --es-danger-hover: #ff4d4d; /* danger hover/pressed state */

  /* ------------------------------------------------------------------------
     EXTENSION TOKENS (added during the easyscript app-migration pass, not
     part of the original brief — flagging per the judgment-calls note above):
     --es-ok:   safety-positive / generic non-monetary confirmation (e.g. a
                "Safe" scan badge, a saved-settings flash). Reuses the app's
                pre-existing green hue, deliberately a different hue family
                from --es-mint (grass-green vs. teal-mint) so a "Safe" badge
                can never be visually confused with a money/earnings figure.
     --es-warn: amber warnings/flags (pace warnings, low-footage notices,
                "flagged" badges). The brief is silent on warning color, so
                this reuses the app's existing amber rather than borrowing
                --es-danger (too severe) or --es-mint/--es-ok (wrong meaning).
     ------------------------------------------------------------------------ */
  --es-ok: #22c55e;
  --es-warn: #f59e0b;

  /* Radius scale (percentage — see usage rules above) */
  --es-radius-sm: 10%;      /* ≈ 6-8px on typical control sizes */
  --es-radius-md: 16%;      /* ≈ 10-14px on cards/panels */
  --es-radius-lg: 26%;      /* tiles/icons/avatars — the EasyScript tile radius */

  /* Type scale (px) */
  --es-text-xs: 13px;
  --es-text-sm: 15px;
  --es-text-md: 18px;
  --es-text-lg: 24px;
  --es-text-xl: 32px;
  --es-text-2xl: 44px;
  --es-text-3xl: 60px;
}

/* ==========================================================================
   Wordmark cursor blink — animated contexts only (hero/splash). See
   .es-wordmark--blink below. 1.1s, hard steps (no easing), matches a
   terminal-style caret rather than a soft CSS fade.
   ========================================================================== */
@keyframes es-cursor-blink {
  0%, 55% {
    opacity: 1;
  }
  56%, 100% {
    opacity: 0.15;
  }
}

/* ==========================================================================
   .es-wordmark — "easyscript" + cursor block, per the wordmark rules above.

   Markup:
     <span class="es-wordmark">easyscript</span>                  (dark bg)
     <span class="es-wordmark es-wordmark--on-light">easyscript</span>  (light bg)
     <span class="es-wordmark es-wordmark--blink">easyscript</span>    (animated)

   Implementation notes:
   - display:inline-flex + align-items:baseline puts the text node and the
     ::after cursor block on a shared flex baseline, which is what actually
     achieves "baseline-aligned" (vertical-align does not apply to flex
     items, so this is not decorative — it's required for the rule to hold).
   - All cursor metrics are in em, relative to the wordmark's own font-size,
     so the block scales correctly at any type-scale step.
   - text-transform:lowercase is a belt-and-suspenders guard against the
     "Easyscript" / "Easy Script" never-rules — the source text should
     already be lowercase, this just makes mistakes unrenderable.
   ========================================================================== */
.es-wordmark {
  display: inline-flex;
  align-items: baseline;
  font-family: "Space Grotesk", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -0.035em;
  text-transform: lowercase;
  color: var(--es-text);
  line-height: 1;
}

.es-wordmark--on-light {
  color: var(--es-ink-deep);
}

.es-wordmark::after {
  content: "";
  display: inline-block;
  width: 0.33em;
  height: 0.8em;
  margin-left: 0.14em;
  border-radius: 0.07em;
  background: var(--es-accent);
  vertical-align: baseline;
}

.es-wordmark--blink::after {
  animation: es-cursor-blink 1.1s steps(1) infinite;
}