/*
|--------------------------------------------------------------------------
| Opero Generated Tokens
|--------------------------------------------------------------------------
| Opero Generated Entry Point
| Opero Managed Default File
| Purpose: Framework token bridge generated from app visual settings.
| This file is regenerated by Opero and intentionally limited to :root.
| Use these tokens from custom CSS files instead of hardcoding colors/fonts.
| Available tokens:
| - --opero-primary --opero-secondary --opero-accent
| - --opero-background --opero-surface --opero-text
| - --opero-font-body --opero-font-display
*/

:root {
    --opero-primary: #f8991d;
    --opero-secondary: #f9a744;
    --opero-accent: #ffcb68;
    --opero-background: #fffdf2;
    --opero-surface: #ffffff;
    --opero-text: #1a1208;
    --opero-font-body: 'IBM Plex Sans', sans-serif;
    --opero-font-display: 'Space Grotesk', sans-serif;
    --opero-btn-radius: 999px;
    --opero-panel-radius: 28px;
    --opero-input-radius: 14px;
    --opero-container-max: 1280px;
    --opero-container-wide-max: 1480px;
    --opero-shadow-base: 0 8px 24px color-mix(in srgb, var(--opero-text) 16%, transparent);
    --opero-shadow-hover: 0 18px 40px color-mix(in srgb, var(--opero-text) 20%, transparent);
    --opero-btn-bg: linear-gradient(135deg, color-mix(in srgb, var(--opero-primary) 92%, white), var(--opero-secondary));
    --opero-btn-bg-hover: linear-gradient(135deg, color-mix(in srgb, var(--opero-primary) 98%, white), color-mix(in srgb, var(--opero-secondary) 95%, white));
    --opero-btn-text: white;
    --opero-btn-border: transparent;
    --opero-btn-shadow: var(--opero-shadow-base);
    --opero-btn-shadow-hover: var(--opero-shadow-hover);
    --opero-input-bg: color-mix(in srgb, var(--opero-surface) 94%, white);
    --opero-input-border: 1px solid color-mix(in srgb, var(--opero-text) 16%, transparent);
    --opero-input-border-bottom: 1px solid color-mix(in srgb, var(--opero-text) 16%, transparent);
    --opero-input-focus-border: var(--opero-primary);
    --opero-input-focus-ring: 0 0 0 3px color-mix(in srgb, var(--opero-primary) 22%, transparent);
    --opero-text-soft: color-mix(in srgb, var(--opero-text) 68%, var(--opero-primary));
    --opero-text-muted: color-mix(in srgb, var(--opero-text) 46%, var(--opero-background));
    --line-soft: color-mix(in srgb, var(--opero-accent) 40%, transparent);
    --brand-strong: color-mix(in srgb, var(--opero-primary) 88%, #000);
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;
    --shadow-sm: none;
    --shadow-md: 0 8px 24px color-mix(in srgb, var(--opero-text) 16%, transparent);
    --shadow-lg: 0 18px 40px color-mix(in srgb, var(--opero-text) 20%, transparent);
    --shadow-xl: 0 32px 64px color-mix(in srgb, var(--opero-text) 24%, transparent);
    --color-danger: #c0392b;
    --color-danger-bg: color-mix(in srgb, #c0392b 10%, white);
    --color-danger-border: color-mix(in srgb, #c0392b 30%, transparent);
    --color-success: #027a48;
    --color-success-bg: color-mix(in srgb, #027a48 10%, white);
    --color-success-border: color-mix(in srgb, #027a48 30%, transparent);
    --color-warning: #8a5f0a;
    --color-warning-bg: color-mix(in srgb, #e6a817 12%, white);
    --color-warning-border: color-mix(in srgb, #e6a817 40%, transparent);
    --color-info: #1a5fb4;
    --color-info-bg: color-mix(in srgb, #1a5fb4 10%, white);
    --color-info-border: color-mix(in srgb, #1a5fb4 30%, transparent);
    --canvas: var(--opero-background);
    --surface: var(--opero-surface);
    --surface-2: color-mix(in srgb, var(--opero-surface) 86%, var(--opero-background));
    --ink: var(--opero-text);
    --ink-soft: color-mix(in srgb, var(--opero-text) 70%, var(--opero-primary));
    --line: var(--opero-accent);
    --line-2: color-mix(in srgb, var(--opero-accent) 72%, var(--opero-secondary));
    --brand: var(--opero-primary);
    --brand-2: var(--opero-secondary);
    --brand-3: var(--opero-accent);
    --brand-strong-alias: var(--brand-strong);
    --focus: var(--opero-accent);
    --font-ui: var(--opero-font-body);
    --font-display: var(--opero-font-display);
}