/* ============================================================
   Licencias.es — Clay design tokens
   Layer 1: raw tokens + Bootstrap 5 variable overrides
   ============================================================ */

:root {
    /* --- Base palette --- */
    --clay-cream:   #faf9f7;
    --clay-paper:   #ffffff;
    --clay-oat:     #dad4c8;
    --clay-sand:    #c9c2b3;
    --clay-ink:     #1b1b1a;
    --clay-ink-2:   #2b2a28;
    --clay-muted:   #6a665f;
    --clay-line:    rgba(27,27,26,.12);
    --clay-line-2:  rgba(27,27,26,.22);

    /* --- Accent swatches (Clay "flavors") --- */
    --swatch-matcha:      #b8d6a6;
    --swatch-slushie:     #a9c6e8;
    --swatch-lemon:       #f2d65b;
    --swatch-ube:         #c9b3e0;
    --swatch-pomegranate: #e77b78;
    --swatch-blueberry:   #6b7cc4;
    --swatch-coral:       #f2a98b;
    --swatch-moss:        #7f9e6d;
    --swatch-clay-pink:   #e8c4c0;
    --swatch-sky:         #bfe0e6;

    /* --- Shadow (Clay look: hard offset + soft layer) --- */
    --clay-shadow-hard:   -7px 7px 0 0 var(--clay-ink);
    --clay-shadow-card:
        0 1px 0 var(--clay-line),
        0 2px 0 var(--clay-line),
        -4px 6px 0 0 rgba(27,27,26,.08);
    --clay-shadow-card-hover:
        0 1px 0 var(--clay-line),
        0 2px 0 var(--clay-line),
        -8px 10px 0 0 rgba(27,27,26,.14);

    /* --- Typography --- */
    --font-sans:  "Inter", "Roobert", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono:  "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* --- Radius --- */
    --r-sm: .5rem;
    --r-md: .875rem;
    --r-lg: 1.25rem;
    --r-xl: 1.75rem;
    --r-pill: 999px;

    /* --- Spacing rhythm --- */
    --gap-1: .25rem;
    --gap-2: .5rem;
    --gap-3: 1rem;
    --gap-4: 1.5rem;
    --gap-5: 2.5rem;
    --gap-6: 4rem;

    /* ============================================================
       Layer 2: Bootstrap 5 variable overrides
       ============================================================ */

    --bs-body-bg:         var(--clay-cream);
    --bs-body-color:      var(--clay-ink);
    --bs-body-font-family: var(--font-sans);
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.55;

    --bs-border-color:        var(--clay-line);
    --bs-border-color-translucent: var(--clay-line);
    --bs-border-radius:       var(--r-md);
    --bs-border-radius-sm:    var(--r-sm);
    --bs-border-radius-lg:    var(--r-lg);
    --bs-border-radius-xl:    var(--r-xl);
    --bs-border-radius-pill:  var(--r-pill);

    --bs-primary:         var(--clay-ink);
    --bs-primary-rgb:     27,27,26;
    --bs-secondary:       var(--clay-muted);
    --bs-dark:            var(--clay-ink);
    --bs-dark-rgb:        27,27,26;
    --bs-light:           var(--clay-cream);
    --bs-light-rgb:       250,249,247;

    --bs-link-color:            var(--clay-ink);
    --bs-link-hover-color:      var(--clay-ink-2);
    --bs-link-decoration:       underline;
    --bs-link-decoration-thickness: 1px;
    --bs-link-underline-offset: 3px;

    --bs-font-sans-serif: var(--font-sans);
    --bs-font-monospace:  var(--font-mono);

    --bs-box-shadow:      var(--clay-shadow-card);
    --bs-box-shadow-sm:   0 1px 0 var(--clay-line);
    --bs-box-shadow-lg:   var(--clay-shadow-card-hover);
}

/* --- Typography scale (Clay: tight, confident) --- */
html { -webkit-text-size-adjust: 100%; }
body { background: var(--clay-cream); }

h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
    font-family: var(--font-sans);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--clay-ink);
}
.display-1 { font-size: clamp(2.5rem, 6vw, 4.5rem); letter-spacing: -0.035em; line-height: 1.02; }
.display-2 { font-size: clamp(2rem, 4.5vw, 3.25rem); letter-spacing: -0.03em; line-height: 1.05; }
.display-3 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); letter-spacing: -0.025em; line-height: 1.1; }

.lead { font-weight: 400; color: var(--clay-ink-2); }

/* Selection */
::selection { background: var(--swatch-lemon); color: var(--clay-ink); }