/*
 * TaiGHT CSS Custom Properties — Cosmic identity
 * Mirrors PaletteDark in TaiGHTTheme.cs. Single source of truth for
 * brand colors, gradients, and the self-hosted Space Grotesk font.
 */

@font-face {
    font-family: 'Space Grotesk';
    src: url('/fonts/space-grotesk/SpaceGrotesk[wght].woff2') format('woff2-variations'),
         url('/fonts/space-grotesk/SpaceGrotesk[wght].woff2') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Brand colors — Cosmic palette */
    --brand-cosmic-black: #0B0018;
    --brand-midnight-violet: #11041F;
    --brand-deep-cosmos: #1C0733;
    --brand-night-violet: #280D45;
    --brand-galaxy-purple: #3E146B;
    --brand-nebula-violet: #8C42DB;
    --brand-plasma-pink: #D942DB;
    --brand-aqua-pulse: #22D3EE;
    --brand-neo-turquoise: #14F1D9;
    --brand-almost-white: #F7F7F7;
    --brand-light-alloy: #DBDBDB;

    /* Named gradients */
    --gradient-cosmic-cosmos: linear-gradient(180deg, var(--brand-cosmic-black) 0%, var(--brand-deep-cosmos) 100%);
    --gradient-midnight-cosmos: linear-gradient(180deg, var(--brand-midnight-violet) 0%, var(--brand-deep-cosmos) 100%);

    /* MudBlazor reduces Outlined-button border alpha by default so it
       reads as "secondary visual hierarchy". Force it to 1 so Outlined
       buttons use their Color at full Nebula Violet brightness, matching
       the brand. */
    --mud-palette-border-opacity: 1;

    /* Font stack */
    --brand-font: 'Space Grotesk', system-ui, sans-serif;

    /* Swappable accent for "areas to improve" / lower-score signals.
       Currently aliased to Warning so it matches existing semantic
       progress bars. Change to a different accent (e.g. plasma pink
       or neo turquoise) and both the Areas to Improve UI and the
       low-score progress bars in InnovationQuiz pick it up. */
    --brand-accent-improve: #D97706;

    /* Typography scale — mirrors TaiGHTTheme.cs Typography (single source
       of truth for size + line-height, usable from plain CSS too). */
    --typo-display-size:    80px;  --typo-display-line:    88px;
    --typo-headline-1-size: 64px;  --typo-headline-1-line: 70px;
    --typo-headline-2-size: 44px;  --typo-headline-2-line: 48px;
    --typo-headline-3-size: 24px;  --typo-headline-3-line: 27px;
    --typo-headline-4-size: 18px;  --typo-headline-4-line: 20px;
    --typo-intro-size:      21px;  --typo-intro-line:      26px;
    --typo-body-size:       16px;  --typo-body-line:       20px;

    /* Project-level long-form line-heights — extensions to the brand
       Body spec (16/20/400) for narrative copy. Brand Body line is
       tight (1.25 ratio) which suits cards and dense UI; long
       paragraphs and articles need more breathing room. Apply via
       .body-prose (UI long text) or via .article-body p (rendered
       markdown). Unitless ratios so the line-height scales with the
       host element's font size (works on body1 16px, subtitle1 21px,
       article h2 24px, etc.). Change here to retune both. */
    --line-height-prose:    1.6;    /* non-card long text (16px → 25.6, 21px → 33.6) */
    --line-height-article:  1.85;   /* editorial articles (16px → 29.6) */
}