:root{

/*==================================================
COLORS
==================================================*/

--uff-color-primary:#253e66;
--uff-color-primary-hover:#355586;

--uff-color-secondary:#f7f7f7;

--uff-color-success:#56b870;
--uff-color-success-hover:#44985b;

--uff-color-danger:#d9534f;
--uff-color-danger-hover:#bf3f3b;

--uff-color-warning:#ffb547;

--uff-color-white:#ffffff;
--uff-color-black:#000000;

/* Semantic surfaces. Brand customisation must never redefine pure white. */
--uff-color-surface:#ffffff;
--uff-color-surface-muted:#f3f5f8;
--uff-color-on-primary:#ffffff;
--uff-color-focus:rgba(37,62,102,.28);

--uff-color-text:#253e66;
--uff-color-text-light:#666666;

--uff-color-border-light:rgba(37,62,102,.05);
--uff-color-border:rgba(37,62,102,.08);
--uff-color-border-strong:rgba(37,62,102,.15);

--uff-color-overlay:rgba(0,0,0,.55);


/*==================================================
TYPOGRAPHY
==================================================*/

--uff-font-heading:"EB Garamond",serif;
--uff-font-body:"Raleway",sans-serif;

--uff-font-regular:400;
--uff-font-medium:500;
--uff-font-semibold:600;
--uff-font-bold:700;


/*==================================================
FONT SIZE
==================================================*/

--uff-text-xs:12px;
--uff-text-sm:14px;
--uff-text-md:15px;
--uff-text-lg:17px;
--uff-text-xl:20px;
--uff-text-2xl:24px;
--uff-text-3xl:28px;
--uff-text-4xl:32px;
--uff-text-5xl:42px;


/*==================================================
LINE HEIGHT
==================================================*/

--uff-line-tight:1.15;
--uff-line-normal:1.5;
--uff-line-relaxed:1.7;


/*==================================================
SPACING
==================================================*/

--uff-space-0:0;
--uff-space-1:4px;
--uff-space-2:8px;
--uff-space-3:12px;
--uff-space-4:16px;
--uff-space-5:20px;
--uff-space-6:24px;
--uff-space-7:32px;
--uff-space-8:40px;
--uff-space-9:48px;
--uff-space-10:64px;
--uff-space-11:80px;
--uff-space-12:96px;


/*==================================================
COMPONENT SIZES
==================================================*/

--uff-size-xs:32px;
--uff-size-sm:40px;
--uff-size-md:48px;
--uff-size-lg:56px;
--uff-size-xl:64px;


/*==================================================
RADIUS
==================================================*/

--uff-radius-xs:4px;
--uff-radius-sm:8px;
--uff-radius-md:12px;
--uff-radius-lg:18px;
--uff-radius-xl:24px;

--uff-radius-full:999px;

/* Alias de compatibilidad */

--uff-radius-pill:var(--uff-radius-full);


/*==================================================
SHADOWS
==================================================*/

--uff-shadow-xs:0 1px 3px rgba(0,0,0,.04);
--uff-shadow-sm:0 4px 12px rgba(0,0,0,.05);
--uff-shadow-md:0 12px 35px rgba(0,0,0,.08);
--uff-shadow-lg:0 22px 50px rgba(0,0,0,.15);

/* Soft semantic states. */
--uff-color-success-soft:#dff6e5;
--uff-color-success-text:#27683a;
--uff-color-danger-soft:#fde8e7;
--uff-color-danger-text:#9f302d;
--uff-color-warning-soft:#fff2d9;
--uff-color-warning-text:#7a5000;


/*==================================================
TRANSITIONS
==================================================*/

--uff-transition-fast:.18s ease;
--uff-transition:.25s ease;
--uff-transition-slow:.45s ease;


/*==================================================
OPACITY
==================================================*/

--uff-opacity-disabled:.45;
--uff-opacity-muted:.65;


/*==================================================
Z INDEX
==================================================*/

--uff-z-dropdown:100;
--uff-z-sticky:200;
--uff-z-sidebar:300;
--uff-z-overlay:400;
--uff-z-modal:500;
--uff-z-toast:900;


/*==================================================
LAYOUT
==================================================*/

--uff-container-sm:720px;
--uff-container-md:960px;
--uff-container-lg:1200px;
--uff-container-xl:1440px;


/*==================================================
BUTTONS
==================================================*/

--uff-button-height-sm:var(--uff-size-sm);
--uff-button-height-md:46px;
--uff-button-height-lg:var(--uff-size-lg);


/*==================================================
INPUTS
==================================================*/

--uff-input-height:52px;


/*==================================================
SHARED COMPACT CONTROL
Quantity and Add to Cart Toggle consume this contract.
==================================================*/

--uff-control-width:130px;
--uff-control-height:36px;
--uff-control-button-size:30px;
--uff-control-center-width:64px;
--uff-control-padding:3px;
--uff-control-radius:var(--uff-radius-full);
--uff-control-background:var(--uff-color-surface);
--uff-control-hover-background:var(--uff-color-surface-muted);
--uff-control-border:1px solid var(--uff-color-border);
--uff-control-shadow:var(--uff-shadow-xs);
--uff-control-button-shadow:0 1px 2px rgba(15,23,42,.04);
--uff-control-focus-ring:0 0 0 3px var(--uff-color-focus);


/*==================================================
CARDS
==================================================*/

--uff-card-radius:var(--uff-radius-lg);
--uff-card-padding:var(--uff-space-6);
--uff-card-shadow:var(--uff-shadow-md);


/*==================================================
MODALS
==================================================*/

--uff-modal-width:760px;


/*==================================================
SIDEBAR
==================================================*/

--uff-sidebar-width:420px;

}