/*
 * Theme: Silke – soft, warm and airy (made for Scapa Media).
 *
 * Every theme defines the same variables: the palette slots, semantic colours, fonts, shape,
 * the six surface slots and the "signature" tokens used by the shared components in site.css.
 * Structural tokens (type scale, spacing, containers, motion curves) live in site/tokens.css.
 */
:root {
    /* Palette (from the current scapamedia.se) */
    --palette-ink: #2b2b2b;
    --palette-ink-soft: #4a4542;
    --palette-cream: #fff9f5;
    --palette-blush: #fdf1ec;
    --palette-rose: #f4ddd2;
    --palette-sand: #ede8e3;
    --palette-clay: #c89a83;
    --palette-cocoa: #63432f;
    --palette-white: #ffffff;

    /* Semantic colours (default surface = cream) */
    --bg: var(--palette-cream);
    --fg: var(--palette-ink);
    --accent: var(--palette-cocoa);
    --accent-contrast: var(--palette-cream);
    --highlight: var(--palette-clay);
    --card: var(--palette-white);
    --button-bg: var(--palette-ink);
    --button-fg: var(--palette-cream);

    --font-body: 'Poppins', ui-sans-serif, system-ui, sans-serif;
    /* Headings use Poppins too (same family as the body, heavier and tighter) */
    --font-display: 'Poppins', ui-sans-serif, system-ui, sans-serif;
    --heading-weight: 500;
    --heading-accent-weight: 300;
    --leading-tight: 1.08;
    --leading-snug: 1.2;
    --leading-body: 1.7;
    --tracking-tight: -0.035em;
    --tracking-wide: 0.14em;

    /* Shape */
    --radius-s: 0.75rem;
    --radius-m: 1.5rem;
    --radius-l: 2.5rem;
    --radius-pill: 999px;
    --shadow-soft: 0 1px 2px rgb(43 43 43 / 0.04), 0 24px 60px -24px rgb(99 67 47 / 0.22);
    --shadow-lift: 0 2px 6px rgb(43 43 43 / 0.06), 0 40px 80px -30px rgb(99 67 47 / 0.35);


    /* Signature details */
    --heading-em-style: italic;          /* *ord* in headings */
    --eyebrow-color: var(--accent);
    --eyebrow-rule-width: 2rem;          /* the short line before eyebrows */
    --eyebrow-rule-height: 1px;
    --eyebrow-rule-color: currentColor;
    --button-radius: var(--radius-pill);
    --button-padding: 1rem 1.75rem;
    --button-case: none;
    --button-tracking: normal;
    --button-weight: 500;
    --glow-display: block;               /* soft colour glow behind heroes and CTAs */
    --reel-radius: 1.75rem;              /* phone cards in Reels / Socialt flöde */
    --logo-weight: 600;
    --header-scrolled-bg: color-mix(in oklab, var(--palette-cream) 82%, transparent);
    --dropdown-bg: var(--palette-cream);
    --dropdown-hover: var(--palette-blush);
}

/* ───── Surfaces: what each background slot looks like in this theme ───── */
[data-surface="cream"] { --bg: var(--palette-cream); }
[data-surface="white"] { --bg: var(--palette-white); --card: var(--palette-cream); }
[data-surface="blush"] { --bg: var(--palette-blush); }
[data-surface="sand"]  { --bg: var(--palette-sand); --card: var(--palette-cream); }
[data-surface="ink"] {
    --bg: var(--palette-ink); --fg: var(--palette-cream);
    --accent: var(--palette-clay); --accent-contrast: var(--palette-ink); --highlight: var(--palette-clay);
    --card: var(--palette-ink-soft); --button-bg: var(--palette-cream); --button-fg: var(--palette-ink);
}
[data-surface="cocoa"] {
    --bg: var(--palette-cocoa); --fg: var(--palette-cream);
    --accent: var(--palette-rose); --accent-contrast: var(--palette-cocoa); --highlight: var(--palette-rose);
    --card: color-mix(in oklab, var(--palette-cocoa) 80%, white); --button-bg: var(--palette-cream); --button-fg: var(--palette-cocoa);
}