/* 
   OmniStore V2 - Design Tokens Base 
   Este archivo define los colores, fuentes y espaciados maestros.
   Cada tema puede sobrescribir estas variables.
*/

:root {
    /* Brand Colors (Overridable by Merchant) */
    --h-primary: 210;
    --s-primary: 49%;
    --l-primary: 36%;
    --h-accent: 15;
    --s-accent: 100%;
    --l-accent: 61%;

    /* Functional Colors (Default: Dark Mode) */
    --bg: #0f172a;
    --panel: #1e293b;
    --ink: #f8fafc;
    --muted: #94a3b8;
    --card-bg: #1e293b;
    --brand: hsl(var(--h-primary), var(--s-primary), var(--l-primary));
    --brand-light: hsl(var(--h-primary), var(--s-primary), calc(var(--l-primary) + 20%));
    --gold: hsl(var(--h-accent), var(--s-accent), var(--l-accent));
    --border: #334155;
    --radius: 16px;
    --shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.5);
    --glass: rgba(15, 23, 42, 0.8);
    --glass-border: rgba(255, 255, 255, 0.08);

    /* Typography */
    --font-heading: 'Inter', sans-serif;
    --font-body: 'Inter', system-ui, Arial;

    /* Grid & Spacing */
    --container-max: 1200px;
    --gap-base: 20px;
}

/* Light Mode Tokens */
[data-theme="light"] {
    --bg: #f8fafc;
    --panel: #ffffff;
    --ink: #0f172a;
    --muted: #64748b;
    --card-bg: #f1f5f9;
    --brand: hsl(var(--h-primary), var(--s-primary), calc(var(--l-primary) - 10%));
    --brand-light: hsl(var(--h-primary), var(--s-primary), var(--l-primary));
    --gold: hsl(var(--h-accent), var(--s-accent), calc(var(--l-accent) - 10%));
    --border: #e2e8f0;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    --glass: rgba(255, 255, 255, 0.9);
    --glass-border: rgba(15, 23, 42, 0.05);
}