/* Bloomera Living — Design Tokens v1.0.0 */

/* ── Fuentes locales ── */
@font-face {
    font-family: "Instrument Serif";
    src: url("../fonts/InstrumentSerif-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Instrument Serif";
    src: url("../fonts/InstrumentSerif-Italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Figtree";
    src: url("../fonts/Figtree-VariableFont_wght.woff2") format("woff2");
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Figtree";
    src: url("../fonts/Figtree-Italic-VariableFont_wght.woff2") format("woff2");
    font-weight: 300 900;
    font-style: italic;
    font-display: swap;
}

/* ── Paleta ── */
:root {
    --cream:     #F7F3EA;
    --moss:      #445840;
    --sage:      #A9BFA0;
    --blush:     #E8C9B8;
    --sand:      #D9CBB0;
    --paper:     #EDE8DD;
    --ink:       #211F1A;
    --gold:      #AD8752;
    --white:     #FFFFFF;
    --line:      #DAD3C2;
    --muted:     #8C8776;
    --ink-soft:  #5A584D;
    --moss-deep: #2F4030;

    /* Semánticos — superficies */
    --surface-base:       var(--cream);
    --surface-editorial:  var(--paper);
    --surface-card:       var(--white);
    --surface-strong:     var(--moss);
    --surface-quiet:      var(--sand);
    --surface-accent:     var(--sage);

    /* Semánticos — texto */
    --text-body:      var(--ink);
    --text-muted:     var(--muted);
    --text-soft:      var(--ink-soft);
    --text-heading:   var(--moss);
    --text-on-strong: var(--cream);
    --text-overline:  var(--gold);

    /* Semánticos — bordes */
    --border-hairline: var(--line);
    --border-strong:   var(--moss);

    /* Semánticos — acción */
    --action-primary-bg:       var(--moss);
    --action-primary-fg:       var(--cream);
    --action-primary-bg-hover: #37492F;
    --action-cta-bg:           var(--blush);
    --action-cta-fg:           #6B4632;
    --action-cta-bg-hover:     #DFB9A4;
    --focus-ring:              var(--gold);
}

/* ── Tipografía ── */
:root {
    --font-serif: "Instrument Serif", Georgia, serif;
    --font-sans:  "Figtree", system-ui, sans-serif;

    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

    --leading-display: 0.98;
    --leading-heading: 1.12;
    --leading-body:    1.6;

    --tracking-display:  -0.015em;
    --tracking-overline:  0.12em;
}

/* ── Espaciado ── */
:root {
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 26px;
    --space-7: 34px;
    --space-8: 48px;
    --space-9: 64px;
    --space-10: 96px;

    --radius-sm:  6px;
    --radius-md:  10px;
    --radius-lg:  14px;
    --radius-xl:  20px;
    --radius-pill: 100px;

    --container-max: 1280px;
    --container-pad: clamp(20px, 5vw, 64px);
}

/* ── Elevación ── */
:root {
    --shadow-card:   0 10px 30px -12px rgba(33,31,26,.18), 0 2px 8px -4px rgba(33,31,26,.10);
    --shadow-raised: 0 16px 28px -10px rgba(20,18,12,.40), 0 2px 6px rgba(20,18,12,.15);
    --shadow-soft:   0 4px 14px -6px rgba(33,31,26,.30);
}

/* ── Movimiento ── */
:root {
    --ease:           cubic-bezier(.22,.61,.36,1);
    --dur-fast:       150ms;
    --dur-base:       250ms;
    --dur-reveal:     600ms;
    --transition:     all var(--dur-base) var(--ease);
}