/* =============================================================
   Meridian Theme — Design Tokens & CSS Variables
   OJS 3.3.0.7 Compatible — Novelty-Inspired Refinement
   ============================================================= */

:root {
    /* ── Accent (can be overridden by theme option) ── */
    --accent:        #2563EB;
    --accent-dark:   #1D4ED8;
    --accent-light:  #EFF6FF;
    --accent-50:     #F0F5FF;

    /* ── Neutral Palette — Warmer, more sophisticated ── */
    --white:         #FFFFFF;
    --gray-50:       #F8F9FA;
    --gray-100:      #F1F3F5;
    --gray-200:      #E9ECEF;
    --gray-300:      #DEE2E6;
    --gray-400:      #ADB5BD;
    --gray-500:      #868E96;
    --gray-600:      #495057;
    --gray-700:      #343A40;
    --gray-800:      #212529;
    --gray-900:      #1A1D21;

    /* ── Semantic ── */
    --color-text-primary:   var(--gray-800);
    --color-text-secondary: var(--gray-600);
    --color-text-muted:     var(--gray-500);
    --color-bg:             var(--white);
    --color-bg-subtle:      var(--gray-50);
    --color-bg-card:        var(--white);
    --color-border:         var(--gray-200);
    --color-border-strong:  var(--gray-300);

    /* ── Typography — Academic, readable ── */
    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body:    'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono:    'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

    /* ── Type Scale ── */
    --text-xs:   0.75rem;     /* 12px */
    --text-sm:   0.875rem;    /* 14px */
    --text-base: 1rem;        /* 16px */
    --text-lg:   1.125rem;    /* 18px */
    --text-xl:   1.25rem;     /* 20px */
    --text-2xl:  1.5rem;      /* 24px */
    --text-3xl:  1.875rem;    /* 30px */
    --text-4xl:  2.25rem;     /* 36px */
    --text-5xl:  3rem;        /* 48px */

    /* ── Spacing ── */
    --space-1:   0.25rem;
    --space-2:   0.5rem;
    --space-3:   0.75rem;
    --space-4:   1rem;
    --space-5:   1.25rem;
    --space-6:   1.5rem;
    --space-8:   2rem;
    --space-10:  2.5rem;
    --space-12:  3rem;
    --space-16:  4rem;
    --space-20:  5rem;
    --space-24:  6rem;
    --space-32:  8rem;

    /* ── Layout ── */
    --container-max:   1200px;
    --container-text:  740px;
    --sidebar-width:   320px;
    --gutter:          var(--space-8);

    /* ── Border Radius — More subtle ── */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-full: 9999px;

    /* ── Shadows — Softer, more elegant ── */
    --shadow-xs:  0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.03);
    --shadow-md:  0 4px 12px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.03);
    --shadow-lg:  0 10px 25px rgba(0,0,0,0.05), 0 4px 8px rgba(0,0,0,0.03);
    --shadow-xl:  0 20px 40px rgba(0,0,0,0.06), 0 8px 12px rgba(0,0,0,0.03);

    /* ── Transitions ── */
    --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base:   250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Header ── */
    --header-height:     80px;
    --header-bg:         rgba(255,255,255,0.98);
    --header-border:     var(--color-border);

    /* ── Line Height ── */
    --leading-tight:    1.25;
    --leading-normal:   1.6;
    --leading-relaxed:  1.75;

    /* ── Letter Spacing ── */
    --tracking-tight:  -0.02em;
    --tracking-normal: 0;
    --tracking-wide:   0.03em;
    --tracking-wider:  0.06em;
}