/* ============================================================================
   Design Tokens — Loyalty 3M (extraído de PrizeMage Admin v2)
   ----------------------------------------------------------------------------
   Sin prefijo --v2-* para uso fresh. Todo en variables CSS — re-tematizable
   sobreescribiendo este archivo sin tocar componentes.
   ============================================================================ */

:root {
    /* ── Surfaces (warm off-white, no gray frío) ── */
    --bg:         #fbfaf7;
    --surface:    #ffffff;
    --surface-2:  #f6f4ee;
    --surface-3:  #efece4;

    /* ── Text (warm grays, no pure black) ── */
    --text:       #0f0f10;
    --text-2:     #525156;
    --text-3:     #8a8a92;
    --text-4:     #b3b2b8;

    /* ── Borders ── */
    --border:        rgba(15, 15, 16, 0.08);
    --border-strong: rgba(15, 15, 16, 0.14);
    --divider:       rgba(15, 15, 16, 0.05);

    /* ── Brand ── */
    --accent:        #00BFF8;
    --accent-hover:  #00a8db;
    --accent-soft:   rgba(0, 191, 248, 0.10);
    --accent-tint:   rgba(0, 191, 248, 0.05);

    /* ── Estados semánticos ── */
    --success:       #1ad379;
    --success-hover: #14b465;
    --success-soft:  rgba(26, 211, 121, 0.10);

    --warning:       #f59e0b;
    --warning-soft:  rgba(245, 158, 11, 0.10);

    --danger:        #e5484d;
    --danger-hover:  #cc3a3f;
    --danger-soft:   rgba(229, 72, 77, 0.10);

    /* ── Shadows ── */
    --shadow-xs: 0 1px 2px rgba(15, 15, 16, 0.04);
    --shadow-sm: 0 2px 4px rgba(15, 15, 16, 0.04), 0 1px 2px rgba(15, 15, 16, 0.03);
    --shadow-md: 0 4px 12px rgba(15, 15, 16, 0.05), 0 2px 4px rgba(15, 15, 16, 0.03);
    --shadow-lg: 0 12px 28px rgba(15, 15, 16, 0.06), 0 4px 8px rgba(15, 15, 16, 0.03);

    /* ── Radius escalonado ── */
    --r-xs: 6px;
    --r-sm: 8px;     /* botones, inputs */
    --r-md: 10px;    /* cards */
    --r-lg: 14px;    /* modales */
    --r-pill: 999px; /* badges */

    /* ── Typography ── */
    --font: 'Google Sans Flex', system-ui, -apple-system, sans-serif;
    --font-mono: 'SF Mono', 'JetBrains Mono', Menlo, monospace;

    /* ── Layout ── */
    --sidebar-w:           220px;
    --sidebar-w-collapsed: 64px;
}

/* ── Base reset/global ── */
html, body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-variation-settings: 'opsz' 14, 'wght' 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font);
    color: var(--text);
    font-variation-settings: 'wght' 600;
    letter-spacing: -0.01em;
    margin: 0 0 12px;
}
h1 { font-size: 28px; letter-spacing: -0.02em; }
h2 { font-size: 22px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

::selection { background: var(--accent-soft); }
</content>
</invoke>