/* src/components/basic/XWUITypography/XWUITypography.css */
/**
 * XWUITypography Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Typography: theme/typography/*.css
 */

.xwui-typography {
    margin: 0;
    padding: 0;
}

/* Variants */
.xwui-typography-h1 {
    font-family: var(--font-headings-family, var(--font-family-base, sans-serif));
    font-size: var(--font-size-4xl, 2.5rem);
    font-weight: var(--font-weight-bold, 700);
    line-height: 1.2;
}

.xwui-typography-h2 {
    font-family: var(--font-headings-family, var(--font-family-base, sans-serif));
    font-size: var(--font-size-3xl, 2rem);
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.3;
}

.xwui-typography-h3 {
    font-family: var(--font-headings-family, var(--font-family-base, sans-serif));
    font-size: var(--font-size-2xl, 1.75rem);
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.4;
}

.xwui-typography-h4 {
    font-family: var(--font-headings-family, var(--font-family-base, sans-serif));
    font-size: var(--font-size-2xl, 1.5rem);
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.4;
}

.xwui-typography-h5 {
    font-family: var(--font-headings-family, var(--font-family-base, sans-serif));
    font-size: var(--font-size-xl, 1.25rem);
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.5;
}

.xwui-typography-h6 {
    font-family: var(--font-headings-family, var(--font-family-base, sans-serif));
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.5;
}

.xwui-typography-body {
    font-family: var(--font-body-family, var(--font-family-base, sans-serif));
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-normal, 400);
    line-height: 1.5;
}

.xwui-typography-caption {
    font-family: var(--font-caption-family, var(--font-family-base, sans-serif));
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-normal, 400);
    line-height: 1.4;
}

.xwui-typography-overline {
    font-family: var(--font-caption-family, var(--font-family-base, sans-serif));
    /* sm (not xs): overline/eyebrow labels were hard to read at 0.75rem site-wide. */
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Weight overrides (independent of variant) */
.xwui-typography-weight-normal   { font-weight: var(--font-weight-normal, 400); }
.xwui-typography-weight-medium   { font-weight: var(--font-weight-medium, 500); }
.xwui-typography-weight-semibold { font-weight: var(--font-weight-semibold, 600); }
.xwui-typography-weight-bold     { font-weight: var(--font-weight-bold, 700); }

/* Color variants */
.xwui-typography-primary {
    color: var(--text-primary);
}

.xwui-typography-secondary {
    color: var(--text-secondary);
}

.xwui-typography-tertiary {
    color: var(--text-tertiary);
}

/* variant="inherit" · neutralises the typographic styling so the element
   adopts its parent's font (e.g. a gradient <span> inside an <h1> should keep
   the heading's size/weight, only adding the gradient fill). */
.xwui-typography-inherit {
    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    margin: 0;
}

/* Gradient text · accent → info gradient clipped to the glyphs. Token-driven,
   so it retints with the active theme/accent. Used for hero headline spans. */
.xwui-typography-gradient {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-info, var(--accent-primary)));
    -webkit-background-clip: text;
    background-clip: text;
    /* -webkit-text-fill-color wins over any inherited/utility `color` rule, so
       the glyphs stay transparent and reveal the gradient even when another
       color class (e.g. a global heading color) is also present. */
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* The gradient only paints inside the element's box; with a tight heading
       line-height the glyph DESCENDERS (g, y, p) extend just below it and end up
       unpainted → clipped. Extend the paint area with bottom padding so the full
       glyph shows. The value is in `em`, so it scales with ANY font-size, and is
       generous enough for any reasonable font/line-height - one dynamic fix for
       every gradient/clip text. The matching negative margin keeps the layout
       box unchanged, so nothing shifts. */
    padding-bottom: 0.22em;
    margin-bottom: -0.22em;
}

/* The status tones are TEXT, so they read the accent as INK, not the accent
   fill: --accent-warning is 2.15:1 and --accent-success 2.54:1 on white, and
   --accent-error is 3.1 to 3.7:1 on the dark grounds. The derived inks
   (theme/viz-tokens.css) mix the accent toward --text-primary, so they lighten on a
   dark ground and darken on a light one, and hold 4.5:1 on the text surfaces
   in every theme and inside .xwui-night / .xwui-day. The accent stays the
   fallback for a page that loads no viz-tokens. */
.xwui-typography-error {
    color: var(--role-danger-ink, var(--accent-error));
}

.xwui-typography-success {
    color: var(--role-success-tonal-ink, var(--accent-success));
}

.xwui-typography-warning {
    color: var(--role-warning-tonal-ink, var(--accent-warning));
}

/* ── Advanced effects (config-driven; values come from the view) ───────────── */

/* Highlight / mark - token-driven background behind the glyphs. A custom colour
   (config.highlight = "<color>") is applied inline by the view and wins. */
.xwui-typography-highlight {
    background: var(--highlight-bg, #fef08a);
    color: var(--text-primary);
    padding: 0 0.25em;
    border-radius: var(--radius-xs, 0.25rem);
}

/* Inline code chip. */
.xwui-typography-code {
    font-family: var(--font-mono-family, ui-monospace, "Cascadia Code", Consolas, monospace);
    font-size: 0.9em;
    background: var(--bg-secondary, rgba(0, 0, 0, 0.05));
    color: var(--role-danger-ink, var(--accent-error, #db2777));
    padding: 0.1em 0.4em;
    border: var(--border-width-regular, 1px) solid var(--border-color);
    border-radius: var(--radius-sm, 0.375rem);
}

/* Blockquote rule - leading accent border (logical, so it flips for RTL). */
.xwui-typography-blockquote {
    border-inline-start: 4px solid var(--accent-primary);
    padding-inline-start: 1rem;
}

/* Breathing pulse for display titles (pairs with gradients). */
.xwui-typography-animated {
    animation: xwui-typography-pulse 2.2s ease-in-out infinite;
}
@keyframes xwui-typography-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
    .xwui-typography-animated { animation: none; }
}


/* Screen-reader-only text (config.srOnly): visually hidden, still in the
   accessibility tree. Never display:none or visibility:hidden, which remove it
   from the tree too. Last in the file so its margin and padding win over the
   variant, gradient, highlight and code rules above. Logical sizes, so it is
   the same under any writing mode. */
.xwui-typography-sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Leading rule (config `rule`): a section eyebrow's short glowing line. */
.xwui-typography-rule {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.xwui-typography-rule::before {
  content: "";
  flex: none;
  inline-size: 18px;
  block-size: 2px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}