/*
 * Design Tokens
 * Pritika — Editorial Personal Portfolio
 */

:root {
    /* ── Palette from Prompt (Section 14) ── */
    --color-cafe-noir:   #4C3D19;
    --color-kombu-green: #354024;
    --color-moss-green:  #889063;
    --color-tan:         #CFBB99;
    --color-bone:        #E5D7C4;

    /* ── Mapped System Colors ── */
    --color-bg:          #EDE5D8;
    --color-surface:     #F8F5EE;
    --color-paper:       #EDE5D8;
    --color-paper-card:  #FAF7F0;
    --color-paper-deckle:#EAE2D1;
    --color-text:        #4C3D19;
    --color-text-muted:  #6E6551;
    --color-border:      #D7CFC0;

    --color-moss-card:   #354024;
    --color-moss-dark:   #27301A;
    --color-moss-light:  #4E5D38;
    --color-moss-footer: #354024;
    --color-washi:       rgba(207, 187, 153, 0.82);
    --color-washi-tape:  rgba(207, 187, 153, 0.75);

    --color-accent:      #354024;
    --color-accent-hover:#27301A;

    --color-white:       #FFFFFF;

    /* ── Typography — Families ── */
    --font-serif:        'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-serif-sub:    'Cormorant Garamond', Georgia, serif;
    --font-sans:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-script:       'Caveat', cursive, sans-serif;
    --font-mono:         'Space Mono', 'Courier New', Courier, monospace;

    /* ── Typography — Size Scale ── */
    --text-display:      clamp(3.5rem, 8vw, 9rem);
    --text-h1:           clamp(2rem, 4vw, 3.25rem);
    --text-h2:           clamp(1.5rem, 2.5vw, 2rem);
    --text-h3:           clamp(1.25rem, 2vw, 1.5rem);
    --text-body-lg:      1.125rem;
    --text-body:         1rem;
    --text-small:        0.875rem;
    --text-label:        0.8125rem;
    --text-tiny:         0.6875rem;

    /* ── Typography — Line Heights ── */
    --leading-display:   0.95;
    --leading-heading:   1.1;
    --leading-body:      1.7;
    --leading-tight:     1.3;

    /* ── Typography — Letter Spacing ── */
    --tracking-display:  -0.03em;
    --tracking-heading:  -0.02em;
    --tracking-body:     0;
    --tracking-wide:     0.08em;
    --tracking-wider:    0.12em;

    /* ── Spacing Scale ── */
    --space-4:   0.25rem;
    --space-8:   0.5rem;
    --space-12:  0.75rem;
    --space-16:  1rem;
    --space-20:  1.25rem;
    --space-24:  1.5rem;
    --space-28:  1.75rem;
    --space-32:  2rem;
    --space-40:  2.5rem;
    --space-48:  3rem;
    --space-64:  4rem;
    --space-80:  5rem;
    --space-96:  6rem;
    --space-128: 8rem;
    --space-160: 10rem;

    /* ── Layout ── */
    --container-width:  1280px;
    --content-width:    760px;
    --page-padding:     clamp(1.25rem, 4vw, 3rem);

    /* ── Radius ── */
    --radius-sm:  4px;
    --radius-md:  8px;

    /* ── Easing (Emil Kowalski curves) ── */
    --ease-out:     cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out:  cubic-bezier(0.77, 0, 0.175, 1);

    /* ── Durations ── */
    --duration-fast:   150ms;
    --duration-normal: 200ms;
    --duration-slow:   300ms;

    /* ── Borders ── */
    --border-thin: 1px solid var(--color-border);
}