/* Palime Archive - variables.css */

/* === SYSTEM TOKENS === */
:root {
    --color-bg:        #F9F7F4;
    --color-second:    #F3F3F3;
    --color-text:      #0A0A0A;
    --color-ui:        #D91515;
    --color-card-dark: #2A2A2F;
    --accent:          #D91515;

    /* === SECTION ACCENTS === */
    --accent-main:   #D91515;
    --accent-cinema: #4DB7FF;
    --accent-lit:    #7A4E2A;
    --accent-music:  #FF4FA3;
    --accent-art:    #C6A25A;
    --shell-accent:  var(--accent-main);
    --shell-bg:      #0A0A0A;
    --shell-fg:      #FFFFFF;
    --paper-bg:      #F6F1E8;
    --paper-surface: #FFFFFF;
    --paper-surface-soft: rgba(255, 255, 255, 0.84);
    --paper-texture-image: url("../img/exact_paper_background_seamless_tile.e9eb5728a66c.png");
    --paper-texture-size: 508px 302px;
    --paper-grid-image: var(--paper-texture-image);
    --paper-grain-image: none;
    --paper-grid-size: var(--paper-texture-size);
    --paper-grain-size: auto;
    --paper-border:  rgba(10, 10, 10, 0.09);
    --paper-border-strong: rgba(10, 10, 10, 0.16);
    --text-soft:     #5E5750;
    --text-faint:    #8D8378;
    --text:          var(--color-text);
    --content-width: 840px;

    /* === SECTION BACKGROUNDS === */
    --bg-cinema: #0A1020;
    --bg-lit:    #F5F0EA;
    --bg-music:  #07060A;
    --bg-art:    #0D0C0A;

    /* === TYPOGRAPHY === */
    --font-display: 'Cinzel', serif;
    --font-serif:   'EB Garamond', Georgia, serif;
    --font-mono:    'IBM Plex Mono', monospace;

    /* === SPACING === */
    --spacing-xs:  4px;
    --spacing-sm:  8px;
    --spacing-md:  16px;
    --spacing-lg:  24px;
    --spacing-xl:  40px;
    --spacing-2xl: 80px;

    /* === GRID === */
    --container:    1200px;
    --gutter:       24px;

    /* === RADII === */
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  16px;

    /* === SHADOWS === */
    --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);

    /* === TRANSITIONS === */
    --transition: 0.15s ease;

    /* === Z-INDEX === */
    --z-header:  100;
    --z-overlay: 200;
    --z-modal:   300;
}

/* === PAGE ACCENT SWITCH BY SECTION === */
body[data-section='cinema'] { --accent: var(--accent-cinema); --shell-accent: var(--accent-cinema); }
body[data-section='lit'],
body[data-section='literature'] { --accent: var(--accent-lit); --shell-accent: var(--accent-lit); }
body[data-section='music']  { --accent: var(--accent-music); --shell-accent: var(--accent-music); }
body[data-section='art']    { --accent: var(--accent-art); --shell-accent: var(--accent-art); }

/* === HERO SURFACE TOKENS === */
:root {
    --sp-hero-border:    rgba(255, 255, 255, 0.11);
    --sp-hero-text:      #f7f8fb;
    --sp-hero-text-soft: rgba(255, 255, 255, 0.64);
    --sp-hero-text-mute: rgba(255, 255, 255, 0.36);
}