/*
 * Richbrook — brand tokens.
 *
 * Load AFTER the compiled stylesheet. Only redefines tokens from
 * src/tokens/base.css; it must never contain a component selector, or the
 * next brand inherits a Richbrook-shaped hole.
 *
 * Values are lifted from the previous build (layouts/app.blade.php,
 * home.blade.php, partials/competition-card.blade.php) and need checking
 * against the Figma variables — see docs/FIGMA.md. Where the old build had
 * three near-identical colours for one role, the most-used one won.
 *
 * Franklin Gothic ATF and Photograph Signature are commercial fonts licensed
 * to Richbrook. They live here, not in the base, so a white-label client never
 * ships them by accident.
 */

@font-face { font-family: "Franklin Gothic ATF"; src: url("./fonts/FranklinGothicATF-Regular.otf") format("opentype");      font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Franklin Gothic ATF"; src: url("./fonts/FranklinGothicATF-Italic.otf") format("opentype");       font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Franklin Gothic ATF"; src: url("./fonts/FranklinGothicATF-Medium.otf") format("opentype");       font-weight: 500 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Franklin Gothic ATF"; src: url("./fonts/FranklinGothicATF-MediumItalic.otf") format("opentype"); font-weight: 500 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Franklin Gothic ATF"; src: url("./fonts/FranklinGothicATF-Bold.otf") format("opentype");         font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Franklin Gothic ATF"; src: url("./fonts/FranklinGothicATF-BoldItalic.otf") format("opentype");   font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Franklin Gothic ATF"; src: url("./fonts/FranklinGothicATF-Heavy.otf") format("opentype");        font-weight: 800 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Photograph Signature"; src: url("./fonts/photograph-signature.ttf") format("truetype");         font-weight: 400; font-style: normal; font-display: swap; }

:root {
    color-scheme: dark;

    /* Surfaces — near-black, warm */
    --rb-c-canvas: 38 38 38;          /* #262626 under the steel texture */
    --rb-c-surface: 27 27 27;         /* #1B1B1B */
    --rb-c-surface-2: 48 48 46;
    --rb-c-line: 85 77 62;            /* #DBC391 at ~30% on #1B1B1B */
    --rb-c-line-strong: 123 111 86;

    /* Text */
    --rb-c-ink: 241 240 236;          /* #F1F0EC "mgm-grey" */
    --rb-c-ink-2: 196 194 188;
    --rb-c-ink-3: 150 148 142;

    /* Actions: purple does, gold decorates */
    --rb-c-primary: 123 63 158;       /* #7B3F9E */
    --rb-c-on-primary: 255 255 255;
    --rb-c-accent: 219 195 145;       /* #DBC391 */
    --rb-c-on-accent: 27 27 27;
    --rb-c-focus: 240 219 178;        /* #F0DBB2 cream — visible on dark and on purple */

    /* Status, tuned for a dark page */
    --rb-c-success: 52 211 153;
    --rb-c-success-soft: 18 46 36;
    --rb-c-success-ink: 167 243 208;
    --rb-c-warning: 245 158 11;
    --rb-c-warning-soft: 54 38 12;
    --rb-c-warning-ink: 253 230 138;
    --rb-c-danger: 244 63 94;
    --rb-c-danger-soft: 62 20 28;
    --rb-c-danger-ink: 254 205 211;
    --rb-c-info: 56 189 248;
    --rb-c-info-soft: 16 38 56;
    --rb-c-info-ink: 186 230 253;

    /* Verification in cream: the brand's own "trust" colour, not traffic-light green */
    --rb-c-verify: 240 219 178;
    --rb-c-verify-soft: 46 40 28;
    --rb-c-verify-ink: 240 219 178;

    --rb-c-instant: 251 191 36;
    --rb-c-on-instant: 27 27 27;

    /* Regions */
    --rb-c-header-ink: 255 255 255;
    --rb-c-header-ink-2: 240 219 178;  /* cream icons */
    --rb-c-header-line: 177 150 97;    /* #B19661 */
    --rb-c-footer-ink: 191 191 191;
    --rb-c-footer-heading: 219 195 145;
    --rb-c-footer-line: 219 195 145;
    --rb-c-footer-base-ink: 26 26 26;
    --rb-c-announce-ink: 255 255 255;
    --rb-c-band-ink: 27 27 27;
    --rb-c-band-ink-2: 58 50 35;
    --rb-c-strip-ink: 45 26 10;        /* #2D1A0A on champagne */
    --rb-c-catbar-ink: 255 255 255;
    --rb-c-feature-ink: 241 240 236;
    --rb-c-feature-ink-2: 196 194 188;
    --rb-c-card-ink: 255 255 255;
    --rb-c-card-ink-2: 196 194 188;
    --rb-c-card-price: 240 219 178;    /* #F0DBB2 */
    --rb-c-countdown-ink: 27 27 27;
    --rb-c-countdown-digit-ink: 255 255 255;
    --rb-c-winner-ink: 26 26 26;
    --rb-c-winner-accent: 123 63 158;

    /* Fills */
    --rb-gold: linear-gradient(133deg, #E4CD9F 6.22%, #B19661 74.31%);
    --rb-champagne: linear-gradient(90deg, #DBC391 0.18%, #E7D9B2 49.8%, #DBC391 99.41%);
    --rb-purple: linear-gradient(95deg, #4A2D5B 9.34%, #9D5FC1 100%);

    /*
     * Root-relative on purpose: a url() inside a custom property resolves
     * against the stylesheet that USES the variable (the compiled CSS), not
     * this file. /brands/<brand>/ is where both the library server and
     * Laravel's public/brands put it. @font-face urls above are unaffected.
     */
    --rb-fill-canvas: rgb(38 38 38) url("/brands/richbrook/img/bg-steel-web.png") center top / 1728px auto repeat;
    --rb-fill-surface: linear-gradient(180deg, #3A3A3A 0%, #1B1B1B 100%);
    --rb-fill-card: linear-gradient(180deg, #666 0%, #000 100%);
    --rb-fill-card-media: #000;
    --rb-fill-primary: var(--rb-purple);
    --rb-fill-accent: var(--rb-gold);
    --rb-fill-header: linear-gradient(180deg, #545454 0%, #000 100%);
    --rb-fill-footer: linear-gradient(180deg, #2A2A2A 0%, #0D0D0D 100%);
    --rb-fill-footer-base: var(--rb-champagne);
    --rb-fill-announce: var(--rb-purple);
    --rb-fill-strip: var(--rb-champagne);
    --rb-fill-band: var(--rb-champagne);
    --rb-fill-feature: linear-gradient(180deg, #3A3A3A 0%, #1B1B1B 100%);
    --rb-fill-progress: linear-gradient(91deg, #B19661 12.49%, #E4CD9F 35.38%, #B19661 71.28%);
    --rb-fill-progress-track: linear-gradient(180deg, #4E4D4D 25%, #3C3B3B 50%);
    --rb-fill-countdown: var(--rb-champagne);
    --rb-fill-countdown-digit: linear-gradient(180deg, #3A3A3A 0%, #000 100%);
    --rb-fill-catbar: linear-gradient(180deg, #4A4A4A 0%, #000 100%);
    --rb-fill-panel: linear-gradient(180deg, #2C2C2C 0%, #1F1F1F 100%);  /* solid: transparent was unreadable over the texture */
    --rb-fill-winner: rgb(241 240 236);

    /* Type */
    --rb-font-body: "Franklin Gothic ATF", "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    --rb-font-display: "Franklin Gothic ATF", "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    --rb-font-script: "Photograph Signature", "Brush Script MT", cursive;
    --rb-display-weight: 700;
    --rb-display-tracking: -0.01em;
    --rb-label-transform: uppercase;
    --rb-label-tracking: -0.01em;
    --rb-announce-style: italic;

    /* Shape: square-ish cards and badges, soft buttons, rounded hero */
    --rb-radius-badge: 3px;
    --rb-radius-control: 6px;
    --rb-radius-card: 3px;
    --rb-radius-feature: 12px;

    --rb-shadow-card: 0 4px 10px rgb(0 0 0 / 0.25);
    --rb-shadow-card-hover: 0 14px 36px rgb(0 0 0 / 0.45);
    --rb-shadow-pop: 0 14px 36px rgb(0 0 0 / 0.45);

    --rb-container: 75rem;            /* 1200px */
    --rb-header-height: 7.5rem;       /* 120px; the component drops it on small screens */
    --rb-logo-height: 4rem;
    --rb-nav-justify: flex-end;
    --rb-card-align: center;
    --rb-progress-height: 1.125rem;   /* 18px, tall enough to print the % inside */
    --rb-progress-pct: flex;

    --rb-sheen: linear-gradient(110deg, rgb(255 255 255 / 0) 25%, rgb(255 255 255 / 0.22) 50%, rgb(255 255 255 / 0) 75%);
}

/*
 * Richbrook on the light scheme (checkout): the champagne gold is too pale
 * for text and icons on white, so the accent darkens to the deep gold; the
 * focus ring becomes purple so it shows on white. Cards stay dark, so their
 * price colour is left alone.
 */
.rb-scheme-light {
    --rb-c-accent: 140 110 50;
    --rb-c-focus: 123 63 158;
    --rb-fill-winner: rgb(var(--rb-c-surface)); /* champagne cards read grey on the light canvas */
    --rb-fill-title-em: rgb(var(--rb-c-accent)); /* pale gold gradient is too faint on white */
}