/* Ignyos design tokens (web)
 * Extracted from the Ignyos site palette, spacing, and typography.
 * Use with components.css or your own component layer.
 */

:root {
    /* Typography */
    --ig-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --ig-font-size-display: 2.5rem;
    --ig-font-size-display-mobile: 2rem;
    --ig-font-size-heading: 1.5rem;
    --ig-font-size-subheading: 1.2rem;
    --ig-font-size-body: 1.1rem;
    --ig-font-size-body-sm: 1rem;
    --ig-font-weight-light: 300;
    --ig-font-weight-regular: 400;
    --ig-line-height-base: 1.6;
    --ig-line-height-lead: 1.7;

    /* Colors */
    --ig-color-bg: #0a0a0a;
    --ig-color-surface: rgba(10, 10, 10, 0.75);
    --ig-color-border: #1a1a1a;
    --ig-color-border-strong: #2a2a2a;
    --ig-color-text: #e0e0e0;
    --ig-color-text-strong: #ffffff;
    --ig-color-text-muted: #b0b0b0;
    --ig-color-text-subtle: #909090;
    --ig-color-accent: #c18b5a;
    --ig-color-accent-strong: #ff9b6b;
    --ig-color-pill-bg: rgba(255, 255, 255, 0.02);
    --ig-color-pill-hover-bg: rgba(255, 155, 107, 0.08);
    --ig-color-shadow: rgba(0, 0, 0, 1);

    /* Flame palette (for charts/visuals, not the canvas effect) */
    --ig-palette-flame-1: #ff9b6b;
    --ig-palette-flame-2: #ff7e5e;
    --ig-palette-flame-3: #ffb85e;
    --ig-palette-flame-4: #ff8d7a;
    --ig-palette-flame-5: #ffa97a;

    /* Radius & shadow */
    --ig-radius-lg: 16px;
    --ig-radius-md: 8px;
    --ig-shadow-lg: 0 4px 40px var(--ig-color-shadow);

    /* Spacing (rem-based) */
    --ig-space-2xs: 0.5rem;
    --ig-space-xs: 1rem;
    --ig-space-sm: 1.5rem;
    --ig-space-md: 2.5rem;
    --ig-space-lg: 3rem;
    --ig-space-xl: 4rem;

    /* Motion */
    --ig-transition-fast: 0.2s ease;
}

/* Optional theme helper */
.ig-theme-dark {
    font-family: var(--ig-font-family);
    background-color: var(--ig-color-bg);
    color: var(--ig-color-text);
    line-height: var(--ig-line-height-base);
}