/* ============================================================
   SKIN: NETFLIX CATALOG
   Stessa palette Ornelli (charcoal/bone/brass) applicata al
   layout Netflix a rails + poster cards.
   Zilla Slab + Cormorant Garamond + Barlow Condensed
   ============================================================ */

/* ---- Webfonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@500;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&display=swap');

:root {
    /* ---- Palette ---- */
    --char-1000: #0B0A09;
    --char-900:  #121110;
    --char-800:  #1A1816;
    --char-700:  #232120;
    --char-600:  #2E2B29;
    --char-500:  #3A3633;

    --bone-50:   #FAF6EF;
    --bone-100:  #F2ECE1;
    --bone-200:  #E8DFCF;
    --bone-300:  #D6C9B2;

    --accent-700: #6E5226;
    --accent-500: #B0894A;
    --accent-400: #C9A46A;
    --accent-200: #E6CFA1;

    --danger-600: #5A1A14;

    /* ---- Semantic ---- */
    --bg:            var(--char-1000);
    --bg-elevated:   var(--char-800);
    --fg:            var(--bone-50);
    --fg-muted:      #B8AE9E;
    --fg-subtle:     #807668;
    --border:        var(--char-600);
    --border-strong: var(--char-500);
    --border-accent: rgba(176, 137, 74, 0.35);
    --focus-ring:    rgba(201, 164, 106, 0.55);

    /* ---- Type families ---- */
    --font-display: "Zilla Slab", "Roboto Slab", Georgia, serif;
    --font-serif:   "Cormorant Garamond", "EB Garamond", Garamond, serif;
    --font-sans:    "Barlow Condensed", "Helvetica Neue", Arial, sans-serif;

    /* ---- Radii ---- */
    --r-1: 2px;
    --r-2: 4px;

    /* ---- Skin-specific surfaces ---- */
    --header-bg: linear-gradient(180deg, #1A1411 0%, #0B0A09 100%);
    --nav-bg: rgba(11,10,9,0.92);
    --backdrop-bg: rgba(11,10,9,0.7);
    --overlay-bg: rgba(11,10,9,0.94);
    --photo-wash: linear-gradient(180deg, transparent 50%, rgba(11,10,9,0.95) 100%);
}