{"version":3,"file":"text.css.cjs","names":[],"sources":["../../../src/content/text/text.css?inline"],"sourcesContent":["/* ========================================\n     Base Styles & Defaults\n     ======================================== */\n\n:host {\n  /* Internal variables with CSS custom property fallbacks */\n  --_size: var(--text-size, var(--text-base));\n  --_weight: var(--text-weight, var(--font-normal));\n  --_color: var(--text-color, var(--text-color-body));\n  --_line-height: var(--text-line-height, var(--leading-normal));\n  --_letter-spacing: var(--text-letter-spacing, normal);\n\n  display: block;\n  font-size: var(--_size);\n  font-weight: var(--_weight);\n  line-height: var(--_line-height);\n  color: var(--_color);\n  letter-spacing: var(--_letter-spacing);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/* ========================================\n     Unlayered display overrides\n     These must live outside any @layer so they can beat the unlayered\n     display: block on :host. Same cascade rule that was fixed for [lines].\n     ======================================== */\n\n/* Multi-line truncation */\n:host([lines]) {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  -webkit-line-clamp: var(--_lines);\n}\n\n/* Inline semantic tags — but not when align/truncate force block layout */\n:host(:is([as='span'], [as='label'], [as='code']):not([align], [truncate])) {\n  display: inline;\n}\n\n/* ========================================\n     Variant Styles\n     ======================================== */\n\n/* Body (default) — uses base defaults above */\n\n/* Heading\n   Default size: --heading-md (24px)\n   Letter-spacing: --tracking-header (-0.05em) per theme guidelines\n   Line-height: --leading-tight (1.15) for display headings */\n:host([variant='heading']) {\n  --_size: var(--text-size, var(--heading-md));\n  --_weight: var(--text-weight, var(--font-semibold));\n  --_color: var(--text-color, var(--text-color-heading));\n  --_line-height: var(--text-line-height, var(--leading-tight));\n  --_letter-spacing: var(--text-letter-spacing, var(--tracking-header));\n}\n\n/* Label — slightly tighter line-height for UI labels */\n:host([variant='label']) {\n  --_size: var(--text-size, var(--text-sm));\n  --_weight: var(--text-weight, var(--font-medium));\n  --_color: var(--text-color, var(--text-color-heading));\n  --_line-height: var(--text-line-height, var(--leading-snug));\n}\n\n/* Caption */\n:host([variant='caption']) {\n  --_size: var(--text-size, var(--text-sm));\n  --_color: var(--text-color, var(--text-color-secondary));\n}\n\n/* Overline */\n:host([variant='overline']) {\n  --_size: var(--text-size, var(--text-xs));\n  --_weight: var(--text-weight, var(--font-semibold));\n  --_line-height: var(--text-line-height, var(--leading-none));\n  --_letter-spacing: var(--text-letter-spacing, 0.08em);\n\n  text-transform: uppercase;\n}\n\n/* Code */\n:host([variant='code']) {\n  --_size: var(--text-size, var(--text-sm));\n\n  font-family: var(--font-mono, monospace);\n}\n\n/* ========================================\n     Size Variants — body scale (--text-*)\n     Used by all variants except heading.\n     ======================================== */\n\n:host([size='2xs']) {\n  --_size: var(--text-size, var(--text-2xs));\n}\n\n:host([size='xs']) {\n  --_size: var(--text-size, var(--text-xs));\n}\n\n:host([size='sm']) {\n  --_size: var(--text-size, var(--text-sm));\n}\n\n:host([size='md']) {\n  --_size: var(--text-size, var(--text-base));\n}\n\n:host([size='lg']) {\n  --_size: var(--text-size, var(--text-lg));\n}\n\n:host([size='xl']) {\n  --_size: var(--text-size, var(--text-xl));\n}\n\n:host([size='2xl']) {\n  --_size: var(--text-size, var(--text-2xl));\n}\n\n/* ========================================\n     Size Variants — heading scale (--heading-*)\n     Compound selectors override the body-scale rules above when\n     variant=\"heading\" and a size is also provided.\n     ======================================== */\n\n:host([variant='heading'][size='xs']) {\n  --_size: var(--text-size, var(--heading-xs));\n}\n\n:host([variant='heading'][size='sm']) {\n  --_size: var(--text-size, var(--heading-sm));\n}\n\n:host([variant='heading'][size='md']) {\n  --_size: var(--text-size, var(--heading-md));\n}\n\n:host([variant='heading'][size='lg']) {\n  --_size: var(--text-size, var(--heading-lg));\n}\n\n:host([variant='heading'][size='xl']) {\n  --_size: var(--text-size, var(--heading-xl));\n}\n\n:host([variant='heading'][size='2xl']) {\n  --_size: var(--text-size, var(--heading-2xl));\n}\n\n/* ========================================\n     Weight Variants\n     ======================================== */\n\n:host([weight='normal']) {\n  --_weight: var(--text-weight, var(--font-normal));\n}\n\n:host([weight='medium']) {\n  --_weight: var(--text-weight, var(--font-medium));\n}\n\n:host([weight='semibold']) {\n  --_weight: var(--text-weight, var(--font-semibold));\n}\n\n:host([weight='bold']) {\n  --_weight: var(--text-weight, var(--font-bold));\n}\n\n/* ========================================\n     Color Variants\n     Semantic colors map to --text-color-* tokens.\n     Theme colors map to --color-* base tokens.\n     ======================================== */\n\n:host([color='primary']) {\n  --_color: var(--text-color, var(--color-primary));\n}\n\n:host([color='secondary']) {\n  --_color: var(--text-color, var(--color-secondary));\n}\n\n:host([color='info']) {\n  --_color: var(--text-color, var(--color-info));\n}\n\n:host([color='success']) {\n  --_color: var(--text-color, var(--color-success));\n}\n\n:host([color='warning']) {\n  --_color: var(--text-color, var(--color-warning));\n}\n\n:host([color='error']) {\n  --_color: var(--text-color, var(--color-error));\n}\n\n/* Semantic text colors */\n:host([color='heading']) {\n  --_color: var(--text-color, var(--text-color-heading)); /* --color-contrast-900 */\n}\n\n:host([color='body']) {\n  --_color: var(--text-color, var(--text-color-body)); /* --color-contrast-800 */\n}\n\n:host([color='muted']) {\n  --_color: var(--text-color, var(--text-color-secondary)); /* --color-contrast-600 — AA compliant */\n}\n\n:host([color='tertiary']) {\n  --_color: var(--text-color, var(--text-color-tertiary)); /* --color-contrast-500 — AA for large text */\n}\n\n:host([color='disabled']) {\n  --_color: var(--text-color, var(--text-color-disabled)); /* --color-contrast-400 */\n}\n\n:host([color='contrast']) {\n  --_color: var(--text-color, var(--text-color-contrast)); /* --color-contrast-100 */\n}\n\n@layer refine.utilities {\n  /* ========================================\n     Alignment\n     ======================================== */\n\n  :host([align]) {\n    display: block;\n  }\n\n  :host([align='left']) {\n    text-align: start;\n  }\n\n  :host([align='center']) {\n    text-align: center;\n  }\n\n  :host([align='right']) {\n    text-align: end;\n  }\n\n  :host([align='justify']) {\n    text-align: justify;\n  }\n\n  /* ========================================\n     Truncate (single-line)\n     ======================================== */\n\n  :host([truncate]) {\n    display: block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  /* ========================================\n     Italic\n     ======================================== */\n\n  :host([italic]) {\n    font-style: italic;\n  }\n\n  /* ========================================\n     Block Display for Certain Tags\n     ======================================== */\n\n  :host([as='p']),\n  :host([as='div']),\n  :host(:is([as='h1'], [as='h2'], [as='h3'], [as='h4'], [as='h5'], [as='h6'])) {\n    display: block;\n  }\n\n  /* Note: display: inline for span/label/code is handled outside this @layer\n     (above) so it can override the unlayered :host { display: block }. */\n}\n"],"mappings":""}