/*
|--------------------------------------------------------------------------
| Design tokens
|--------------------------------------------------------------------------
*/

:root {
    --portal-radius: 1rem;
    --portal-radius-sm: 0.75rem;
    --portal-border: color-mix(in srgb, var(--sindibad-primary, #143588) 12%, transparent);
    --portal-border-strong: color-mix(in srgb, var(--sindibad-primary, #143588) 22%, transparent);
    --portal-surface: color-mix(in srgb, var(--sindibad-primary, #143588) 4%, white);
    --portal-surface-raised: #ffffff;
    --portal-shadow: 0 1px 2px color-mix(in srgb, #0f172a 6%, transparent),
        0 8px 24px color-mix(in srgb, var(--sindibad-primary, #143588) 8%, transparent);
    --portal-shadow-hover: 0 2px 4px color-mix(in srgb, #0f172a 8%, transparent),
        0 14px 32px color-mix(in srgb, var(--sindibad-primary, #143588) 14%, transparent);
    --portal-accent: var(--sindibad-secondary, #c9a45c);
    --portal-ink-muted: color-mix(in srgb, #0f172a 55%, transparent);
}

.dark {
    --portal-border: color-mix(in srgb, white 10%, transparent);
    --portal-border-strong: color-mix(in srgb, white 18%, transparent);
    --portal-surface: color-mix(in srgb, var(--sindibad-primary, #143588) 18%, #0b1220);
    --portal-surface-raised: color-mix(in srgb, white 4%, #111827);
    --portal-shadow: 0 1px 2px color-mix(in srgb, black 40%, transparent),
        0 10px 28px color-mix(in srgb, black 35%, transparent);
    --portal-shadow-hover: 0 2px 6px color-mix(in srgb, black 45%, transparent),
        0 16px 36px color-mix(in srgb, black 40%, transparent);
    --portal-ink-muted: color-mix(in srgb, white 60%, transparent);
}