/* shared/tokens.css
   ==========================================
   Design-tokens — ét sted, alt arver herfra.
   Alle andre CSS-filer bruger kun var(--...)
   Jf. bon_v2_zoner_og_layout.md, sektion 9.
   ========================================== */

:root {
    /* ── Brand (kan overskrives pr. installation) ── */
    --brand-primary:       #8e631f;   /* Ristet Rug brun */
    --brand-primary-light: #f1e6b2;   /* Gul/creme */
    --brand-name:          "Ristet Rug";

    /* ── Systemfarver ── */
    --color-surface:       #ffffff;
    --color-background:    #f5f4f2;
    --color-border:        #d7d1ca;
    --color-text:          #333333;
    --color-text-dim:      #8a8580;

    /* ── Statusfarver ── */
    --color-green:         #a5bf75;
    --color-green-dark:    #7a9c54;
    --color-red:           #bc181b;
    --color-blue:          #7594b3;
    --color-orange:        #e8a832;

    /* ── Spacing ── */
    --space-xs:  4px;
    --space-s:   8px;
    --space-m:  16px;
    --space-l:  24px;
    --space-xl: 40px;

    /* ── Typografi ── */
    --font-heading:    'Playfair Display', Georgia, serif;
    --font-body:       'DM Sans', system-ui, 'Segoe UI', sans-serif;
    --font-size-xs:    13px;
    --font-size-s:     14px;
    --font-size-m:     15px;
    --font-size-md:    16px;
    --font-size-l:     18px;
    --font-size-xl:    22px;
    --font-size-2xl:   28px;

    /* ── Sentiment ── */
    --color-sentiment-pos:    #2E9E6B;
    --color-sentiment-pos-bg: #E6F7F0;
    --color-sentiment-neu:    #C8962A;
    --color-sentiment-neu-bg: #FBF3E2;
    --color-sentiment-neg:    #C94040;
    --color-sentiment-neg-bg: #FBE9E9;

    /* ── UI-densitet (sættes pr. zone) ── */
    --touch-target-min:  44px;   /* Kitchen: min klikflade */
    --touch-target-desk: 32px;   /* Office: kan være smallere */
}

/* Kitchen-zone: touch-first */
.zone-kitchen {
    --btn-height:    var(--touch-target-min);
    --font-size-m:   15px;
    --font-size-l:   18px;
    --card-padding:  18px;
}

/* Office-zone: informationstæt */
.zone-office {
    --btn-height:    var(--touch-target-desk);
    --font-size-m:   14px;
    --font-size-l:   16px;
    --card-padding:  12px;
}