/* ============================================================
   CSS CUSTOM FUNCTIONS — Chrome 139+
   Encapsulan las operaciones de color reutilizables
   ============================================================ */

@function --tint(--c <color>, --a <number>) returns <color> {
    result: oklch(from var(--c) l c h / var(--a));
}

@function --lighter(--c <color>, --delta <number>) returns <color> {
    result: oklch(from var(--c) calc(l + var(--delta)) c h);
}

@property --savings-ratio {
    syntax: "<number>";
    initial-value: 1;
    inherits: true;
}

:where(
    button,
    .rail-btn,
    .theme-toggle,
    .panel-action,
    .svg-textarea,
    .code-output,
    .floating-panel
) {
    transition:
        color var(--transition),
        background var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition),
        opacity var(--transition);
}