/**
 * Site-wide design tokens for every eMJey front template.
 *
 * Own look-and-feel here. templates/emjey and templates/emjey-forum both load
 * this file first. Route-specific CSS may use these variables; it should not
 * redefine the brand palette, metal finish, or page gutter.
 */
:root {
    /* Brand */
    --emjey-ink: #111213;
    --emjey-paper: #f6f4ef;
    --emjey-silver: #d3d0c9;
    --emjey-gold: #d6a453;
    --emjey-gold-dark: #bd8c44;
    --emjey-gold-soft: #d6a45324;
    --emjey-gold-border: rgba(214, 164, 83, 0.5);
    --emjey-text: #484848;
    --emjey-text-strong: #292b29;
    --emjey-link: #282725;

    /* Compatibility aliases used by existing shell CSS */
    --home-ink: var(--emjey-ink);
    --home-paper: var(--emjey-paper);
    --home-silver: var(--emjey-silver);
    --home-gold: var(--emjey-gold);

    /* Page frame: small side gutter on desktop shells */
    --emjey-page-gutter: 40px;
    --emjey-page-max: calc(100% - var(--emjey-page-gutter));
    --emjey-shell-max: 72rem;
    --emjey-content-width: 72rem;

    /* Brushed-metal menu finish */
    --menu-metal-direction: to left;
    --menu-grain: url('../images/menu-metal-grain.svg');
    --menu-metal: linear-gradient(var(--menu-metal-direction), #3b3b3b 0%, #d4d4d4 50%, #6f6f6f 94%, #000 100%);
    --menu-metal-lit: linear-gradient(var(--menu-metal-direction), #999 0%, #fefefe 50%, #ccc 94%, #000 100%);
    --emjey-metal-direction: var(--menu-metal-direction);
    --emjey-grain: var(--menu-grain);
    --emjey-metal: var(--menu-metal);
    --emjey-metal-lit: var(--menu-metal-lit);
}

html[dir='rtl'] {
    --menu-metal-direction: to right;
    --emjey-metal-direction: to right;
}