/* ============================================================
   F7&CO — Design Tokens
   Source: Manual_F7&CO.pdf (heydiseno.cl, ©2026)
   ============================================================ */

/* ---------- Self-hosted brand fonts ---------- */
/* Poppins — display & titles */
@font-face{font-family:'Poppins';src:url('fonts/Poppins-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Poppins';src:url('fonts/Poppins-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Poppins';src:url('fonts/Poppins-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Poppins';src:url('fonts/Poppins-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Poppins';src:url('fonts/Poppins-ExtraBold.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap;}

/* Inter — body, UI, long-form */
@font-face{font-family:'Inter';src:url('fonts/Inter-Light.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'Inter';src:url('fonts/Inter-LightItalic.otf') format('opentype');font-weight:300;font-style:italic;font-display:swap;}
@font-face{font-family:'Inter';src:url('fonts/Inter-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Inter';src:url('fonts/Inter-Italic.otf') format('opentype');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'Inter';src:url('fonts/Inter-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Inter';src:url('fonts/Inter-SemiBold.otf') format('opentype');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Inter';src:url('fonts/Inter-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Inter';src:url('fonts/Inter-Black.otf') format('opentype');font-weight:900;font-style:normal;font-display:swap;}

:root {
    /* -----------------------------------------------------------
       BRAND COLORS — base palette (exact HEX from manual)
       ----------------------------------------------------------- */
    --f7-azul:        #141F60;   /* Azul F7&CO — primary navy */
    --f7-azul-02:     #233CF9;   /* Azul 02   — electric blue accent */
    --f7-azul-03:     #525FAB;   /* Azul 03   — mid-blue */
    --f7-amarillo:    #E9F939;   /* Amarillo  — lime accent */
    --f7-gris:        #DEDEDE;   /* Gris      — neutral */
    --f7-negro:       #161617;   /* Negro F7&CO — never pure #000 */
    --f7-blanco:      #FFFFFF;

    /* Tints & shades (derived from the navy + electric blue) */
    --f7-azul-95:     #1A2670;
    --f7-azul-80:     #2B3A8C;
    --f7-azul-60:     #5564AE;
    --f7-azul-40:     #8E99C9;
    --f7-azul-20:     #C7CDE4;
    --f7-azul-05:     #EFF1F8;

    --f7-amarillo-80: #EEFB62;
    --f7-amarillo-60: #F2FC85;
    --f7-amarillo-20: #FAFECF;

    --f7-gris-80:     #B5B5B5;
    --f7-gris-60:     #8A8A8A;
    --f7-gris-40:     #5C5C5C;
    --f7-gris-20:     #2E2E2E;

    /* -----------------------------------------------------------
       SEMANTIC TOKENS — light surface (default)
       ----------------------------------------------------------- */
    --bg:             var(--f7-blanco);
    --bg-soft:        var(--f7-azul-05);
    --bg-inverse:     var(--f7-azul);
    --bg-accent:      var(--f7-amarillo);

    --fg:             var(--f7-azul);
    --fg-muted:       var(--f7-azul-60);
    --fg-subtle:      var(--f7-azul-03);
    --fg-inverse:     var(--f7-blanco);
    --fg-on-accent:   var(--f7-azul);

    --border:         var(--f7-gris);
    --border-strong:  var(--f7-azul);

    --accent:         var(--f7-azul-02);   /* electric blue */
    --accent-2:       var(--f7-amarillo);  /* lime */

    --link:           var(--f7-azul-02);
    --link-hover:     var(--f7-azul);

    /* Status (derived — not in manual; conservative additions) */
    --success:        #0E8A55;
    --warning:        #E4A413;
    --danger:         #C8322B;

    /* -----------------------------------------------------------
       TYPOGRAPHY
       ----------------------------------------------------------- */
    --font-display:   'Poppins', 'Arial', sans-serif;
    --font-body:      'Inter', 'Arial', sans-serif;
    --font-system:    'Arial', 'Helvetica', sans-serif;

    /* Weights actually called out in the manual */
    --w-light:        300;
    --w-regular:      400;
    --w-medium:       500;
    --w-semibold:     600;
    --w-bold:         700;
    --w-extrabold:    800;

    /* Type scale — anchored to the manual's example specimen
       (80pt display title, 40pt subtitle, 18pt bajada, 16pt note, 12pt body) */
    --fs-display:     5.0rem;    /* 80px — Poppins Bold */
    --fs-h1:          3.5rem;    /* 56px */
    --fs-h2:          2.5rem;    /* 40px — Poppins Regular */
    --fs-h3:          1.75rem;   /* 28px */
    --fs-h4:          1.25rem;   /* 20px */
    --fs-bajada:      1.125rem;  /* 18px — Poppins SemiBold */
    --fs-note:        1rem;      /* 16px — Poppins Medium (eyebrow/label) */
    --fs-body:        0.875rem;  /* 14px */
    --fs-small:       0.75rem;   /* 12px — Inter Regular/Light */
    --fs-micro:       0.6875rem; /* 11px */

    --lh-tight:       1.05;
    --lh-snug:        1.2;
    --lh-normal:      1.5;
    --lh-relaxed:     1.65;

    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide:  0.04em;
    --tracking-wider: 0.12em;     /* uppercase eyebrow */

    /* -----------------------------------------------------------
       SPACING + RADII + ELEVATION
       The manual is reductive — sharp geometry, modular blocks.
       Keep radii conservative; the brand reads square / structural.
       ----------------------------------------------------------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    --radius-0: 0px;
    --radius-1: 2px;
    --radius-2: 4px;
    --radius-3: 8px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(20, 31, 96, 0.06);
    --shadow-md: 0 4px 12px rgba(20, 31, 96, 0.08);
    --shadow-lg: 0 12px 32px rgba(20, 31, 96, 0.12);
}

/* ---------- Dark / inverse surface ---------- */
[data-theme="dark"] {
    --bg:           var(--f7-azul);
    --bg-soft:      var(--f7-azul-95);
    --bg-inverse:   var(--f7-blanco);
    --fg:           var(--f7-blanco);
    --fg-muted:     var(--f7-azul-40);
    --fg-subtle:    var(--f7-azul-60);
    --fg-inverse:   var(--f7-azul);
    --border:       var(--f7-azul-80);
    --border-strong: var(--f7-amarillo);
}

/* ============================================================
   ELEMENT DEFAULTS
   ============================================================ */
body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-normal);
    color: var(--fg);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .display {
    font-family: var(--font-display);
    color: var(--fg);
    margin: 0;
    text-wrap: balance;
}

.display      { font-size: var(--fs-display); font-weight: var(--w-bold);      line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
h1            { font-size: var(--fs-h1);      font-weight: var(--w-bold);      line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
h2            { font-size: var(--fs-h2);      font-weight: var(--w-regular);   line-height: var(--lh-snug); }
h3            { font-size: var(--fs-h3);      font-weight: var(--w-semibold);  line-height: var(--lh-snug); }
h4            { font-size: var(--fs-h4);      font-weight: var(--w-semibold);  line-height: var(--lh-snug); }
.bajada       { font-size: var(--fs-bajada);  font-weight: var(--w-semibold);  font-family: var(--font-display); line-height: var(--lh-snug); }
.eyebrow      { font-size: var(--fs-note);    font-weight: var(--w-medium);    font-family: var(--font-display);
                text-transform: uppercase;    letter-spacing: var(--tracking-wider); color: var(--fg-muted); }

p             { font-size: var(--fs-body);    font-weight: var(--w-regular);   line-height: var(--lh-relaxed); text-wrap: pretty; margin: 0 0 1em; }
small, .small { font-size: var(--fs-small);   font-weight: var(--w-regular);   line-height: var(--lh-normal); }
.note         { font-size: var(--fs-small);   font-weight: var(--w-light);     font-style: italic; color: var(--fg-muted); }

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

strong, b     { font-weight: var(--w-semibold); }
em, i         { font-style: italic; }

code, pre, .mono {
    font-family: 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
    font-size: 0.875em;
}