/* best-canadian-casinos.ca — design tokens, DRAFT for approval (2026-10-14)
   Source: https://best-canadian-casinos.ca/dist/css/main.css + computed styles of the live home page
   + /dist/img/canadaian-casinos-logo.png. No new hues: every derived value names its origin. */

:root {
  /* — Extracted (used as-is on the old site) — */
  --brand-accent:        #F62D51; /* theme-color, top nav band, links, primary buttons */
  --brand-logo-tile:     #99220E; /* maple tile in the logo */
  --brand-logo-deep:     #920202; /* logo shading */
  --brand-danger:        #EA152E; /* old cons bullets, star rating, alert--danger */
  --brand-danger-400:    #EE4458; /* old .danger-400 */
  --brand-ink:           #232F38; /* H2/H3, hero band, footer, dark buttons, rank badge */
  --brand-ink-900:       #324350; /* old .dark-900 */
  --brand-ink-800:       #405767; /* old .dark-800 */
  --brand-ink-700:       #4F6A7F; /* old .dark-700, form labels */
  --brand-ink-300:       #A2B6C5; /* old .dark-300, FAQ border */
  --brand-ink-200:       #B9C8D4; /* old .dark-200 */
  --brand-ink-100:       #D1DBE2; /* old .dark-100, table rows, author meta on hero */
  --brand-secondary:     #1976D2; /* old .secondary: checklists, numbered lists, header */
  --brand-success:       #26DAD2; /* old pros bullets, alert--success */
  --brand-warning:       #FFB22B; /* old alert--warning */
  --brand-info:          #5C4AC7; /* old alert--info */
  --text:                #6C6A6A; /* body text */
  --bg:                  #FFFFFF; /* page */
  --bg-soft:             #F6F6F7; /* manifest background_color, alert--dark */
  --bg-zebra:            #FAFAFA; /* content wrappers, FAQ rows */
  --bg-zebra-2:          #F2F2F2; /* even rows of lists/cards */
  --border:              #D0D0D5; /* content wrappers, cards */
  --border-soft:         #DBDBDF;
  --accent-100:          #FEF1F3; /* old .primary-100 */
  --danger-100:          #FBD0D5; /* old .danger-100 */
  --black:               #121212; /* old .black — darkest neutral */

  /* — Derived (formula in comment) — */
  --brand-accent-hover:  #D12645; /* #F62D51 × 85% (mix with black)  — 5.15:1 on white */
  --brand-accent-active: #B8223D; /* #F62D51 × 75% (mix with black)  — 6.30:1 on white */
  --brand-accent-text:   #C52441; /* #F62D51 × 80% — small accent text/links on white, 5.67:1 (base 3.88:1 fails AA <18px) */
  --accent-tint-8:       #FEEEF1; /* #F62D51 at 8% on white — table header, highlighted row */
  --accent-tint-16:      #FEDDE3; /* #F62D51 at 16% on white — "Quebec-friendly" chip bg */
  --ink-tint-10:         #E9EAEB; /* #232F38 at 10% on white — table bg */
  --success-text:        #2E8238; /* #3AA346 (old .green) × 80% — 4.81:1 on white; #26DAD2 stays icon-only */
  --error-text:          #CC2B28; /* old .red, form errors */
  --focus-ring:          rgba(246, 45, 81, .45); /* #F62D51 at 45% */

  /* — Semantic roles — */
  --link: var(--brand-accent-text);
  --link-hover: var(--brand-accent-active);
  --btn-primary-bg: var(--brand-accent);   /* large buttons only: white 15px+/bold passes 3:1 */
  --btn-primary-bg-hover: var(--brand-accent-hover);
  --btn-dark-bg: var(--brand-ink);
  --heading: var(--brand-ink);
  --header-band: var(--brand-accent);      /* logo has white lettering: header stays red in both themes */
  --footer-bg: var(--brand-ink);
  --footer-text: var(--bg-soft);
  --rating-star: var(--brand-danger);
  --rank-badge-bg: var(--brand-ink);
}

/* Dark theme: built only from the same palette */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #121212;  /* old .black */
    --bg-soft:     #1A2025;  /* #232F38 at 50% on #121212 */
    --bg-zebra:    #232F38;  /* brand ink as raised surface */
    --bg-zebra-2:  #324350;
    --border:      #405767;
    --text:        #D1DBE2;  /* brand ink-100, 13.3:1 on #121212 */
    --heading:     #FFFFFF;
    --link:        #F62D51;  /* 4.83:1 on #121212 — passes AA as-is */
    --link-hover:  #EE4458;
    --accent-tint-8: rgba(246,45,81,.12);
    --footer-bg:   #1A2025;
  }
}
:root[data-theme="dark"] {
  --bg: #121212; --bg-soft: #1A2025; --bg-zebra: #232F38; --bg-zebra-2: #324350; --border: #405767;
  --text: #D1DBE2; --heading: #FFFFFF; --link: #F62D51; --link-hover: #EE4458;
  --accent-tint-8: rgba(246,45,81,.12); --footer-bg: #1A2025;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:16px}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.65 "Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif}
h1,h2,h3,h4{font-family:Rubik,"Source Sans 3",system-ui,sans-serif;color:var(--heading);line-height:1.22;margin:1.4em 0 .5em;letter-spacing:-.01em}
h2{font-size:1.6rem}h3{font-size:1.22rem}h4{font-size:1.05rem}
p{margin:0 0 1em}
a{color:var(--link);text-underline-offset:2px}
a:hover{color:var(--link-hover)}
img{max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:8px;z-index:99}.skip:focus{left:8px}
.ok{color:var(--success-text);font-weight:700}.ko{color:var(--error-text);font-weight:700}.tbc{color:var(--brand-ink-700);font-style:italic}
[data-theme] body,body{transition:none}

/* ---------- header ---------- */
.band{background:var(--header-band);color:#fff;position:relative;z-index:20}
.band-in{max-width:1240px;margin:auto;display:flex;align-items:center;gap:20px;padding:0 16px;min-height:76px}
.brand img{display:block;width:220px;height:60px}
.mainnav{margin-left:auto}
.mainnav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.mainnav a{color:#fff;text-decoration:none;font:600 15px/1 "Source Sans 3",sans-serif;padding:10px 10px;border-radius:6px;display:block}
.mainnav a:hover,.mainnav a[aria-current]{background:rgba(0,0,0,.16);color:#fff}
.tools{display:flex;align-items:center;gap:8px}
.prov select{background:rgba(0,0,0,.18);color:#fff;border:1px solid rgba(255,255,255,.55);border-radius:6px;padding:6px 8px;font:600 13px "Source Sans 3",sans-serif;max-width:132px}
.prov option{color:#232F38}
.lang{display:flex;border:1px solid rgba(255,255,255,.7);border-radius:6px;overflow:hidden}
.lang a{color:#fff;text-decoration:none;font:700 13px/1 Rubik,sans-serif;padding:7px 9px}
.lang a[aria-current]{background:#fff;color:var(--brand-accent-active)}
.burger{display:none;margin-left:auto;background:none;border:0;color:#fff;font-size:28px;line-height:1;padding:6px;cursor:pointer}
@media (max-width:1080px){
 .burger{display:block}
 .mainnav{position:absolute;left:0;right:0;top:100%;background:var(--brand-accent-hover);display:none;margin:0}
 .mainnav.open{display:block}
 .mainnav ul{flex-direction:column;padding:8px 16px 14px}
 .tools{order:3}
}
@media (max-width:560px){
 .band-in{flex-wrap:wrap;gap:8px;padding:8px 16px}
 .brand img{width:184px;height:50px}
 .tools{width:100%;justify-content:space-between}
 .prov select{max-width:none}
}

/* ---------- hero ---------- */
.hero{background:var(--brand-ink);color:#fff}
.hero-in{max-width:1240px;margin:auto;padding:22px 16px 30px}
.hero h1{color:#fff;font-size:clamp(1.7rem,3.4vw,2.5rem);margin:.35em 0 .3em;max-width:900px}
.hero-meta{color:var(--brand-ink-100);font-size:14px;margin:0 0 .8em}
.hero .lead{max-width:860px;color:#E9EAEB;font-size:1.06rem}
.hero .lead a{color:#FFC2CD}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px;margin:0;padding:0;font-size:13.5px}
.crumbs li{color:var(--brand-ink-200)}
.crumbs li+li::before{content:"›";margin:0 6px 0 2px;color:var(--brand-ink-300)}
.crumbs a{color:#fff}

/* ---------- layout ---------- */
.wrap{max-width:1240px;margin:auto;padding:24px 16px 48px}
.wrap--toc{display:grid;grid-template-columns:250px minmax(0,1fr);gap:40px;align-items:start}
.toc{position:sticky;top:16px;border:1px solid var(--border);border-radius:10px;padding:14px 16px;background:var(--bg-zebra);max-height:calc(100vh - 32px);overflow:auto}
.toc h2{font-size:.95rem;margin:0 0 .5em;text-transform:uppercase;letter-spacing:.05em}
.toc ol{margin:0;padding-left:1.1em;font-size:14.5px;line-height:1.45}
.toc li{margin:.35em 0}
.toc a{color:var(--text);text-decoration:none}.toc a:hover{color:var(--link)}
@media (max-width:960px){.wrap--toc{display:block}.toc{position:static;margin-bottom:20px;max-height:none}}
.content{min-width:0;max-width:880px}
.sec{margin-bottom:8px}
.sec>h2:first-child{margin-top:1.2em}
.content ul,.content ol{padding-left:1.25em}
.content li{margin:.25em 0}
blockquote{margin:1em 0;padding:.6em 1em;border-left:4px solid var(--brand-accent);background:var(--accent-tint-8)}
aside.note,.note{background:var(--bg-soft);border:1px solid var(--border);border-left:4px solid var(--brand-secondary);border-radius:8px;padding:12px 14px;margin:1em 0}
.fig{margin:1.2em 0}.fig img{border-radius:10px;display:block;border:1px solid var(--border)}
.fig--right{float:right;max-width:42%;margin:0 0 1em 1.2em}
@media(max-width:640px){.fig--right{float:none;max-width:100%;margin:1em 0}}
.fig figcaption{font-size:13.5px;color:var(--brand-ink-700);margin-top:6px}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;margin:1em 0 1.4em;border:1px solid var(--border);border-radius:10px}
table{border-collapse:collapse;width:100%;font-size:15px}
.content table:not(.t){margin:1em 0}
th,td{padding:9px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border)}
thead th{background:var(--brand-ink);color:#fff;font:600 14px Rubik,sans-serif;white-space:nowrap}
tbody tr:nth-child(even){background:var(--bg-zebra)}
caption{caption-side:top;text-align:left;font-size:13.5px;color:var(--brand-ink-700);padding:9px 12px;background:var(--accent-tint-8)}
.content>section table:not(.t){display:block;overflow-x:auto;border:1px solid var(--border);border-radius:10px}
.t--facts th{width:42%;background:var(--bg-zebra);color:var(--heading);font:600 14.5px "Source Sans 3",sans-serif;white-space:normal}

/* ---------- buttons, chips ---------- */
.btn{display:inline-block;background:var(--btn-primary-bg);color:#fff;font:700 16px/1 Rubik,sans-serif;padding:13px 22px;border-radius:9px;text-decoration:none;border:0;cursor:pointer;text-align:center}
.btn:hover{background:var(--btn-primary-bg-hover);color:#fff}
.btn--dark{background:var(--btn-dark-bg)}.btn--dark:hover{background:var(--brand-ink-900)}
.btn--sm{padding:8px 12px;font-size:14px}
.chips{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0!important;margin:.4em 0}
.chips li{background:var(--accent-tint-16);color:var(--brand-accent-active);font:700 12px/1 "Source Sans 3",sans-serif;padding:5px 9px;border-radius:99px;margin:0}

/* ---------- top picks ---------- */
.picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:1.2em 0}
@media(max-width:820px){.picks{grid-template-columns:1fr}}
.pick{position:relative;border:1px solid var(--border);border-radius:14px;padding:18px 16px 14px;background:var(--bg);text-align:center;box-shadow:0 2px 0 var(--border)}
.pick:first-child{border-color:var(--brand-accent);box-shadow:0 0 0 2px var(--accent-tint-16)}
.pick-rank{position:absolute;left:12px;top:12px;background:var(--rank-badge-bg);color:#fff;font:700 13px/1 Rubik;padding:6px 8px;border-radius:6px}
.pick h3{margin:.5em 0 .2em}
.pick-score{font:500 14px Rubik;color:var(--brand-ink-700)}.pick-score b{font-size:22px;color:var(--heading)}
.pick-label{margin:.7em 0 0;font:700 11.5px/1 Rubik;letter-spacing:.12em;color:var(--brand-ink-700)}
.pick-bonus{font:700 17px/1.3 Rubik;color:var(--heading);margin:.3em 0 .4em;min-height:2.6em}
.pick .chips{justify-content:center}
.pick .btn{width:100%;margin-top:6px}
.pick-review{display:inline-block;margin-top:8px;font-size:14.5px}
.pick-age{font-size:12px;color:var(--brand-ink-700);margin:.6em 0 0}
.op-logo{display:block;margin:0 auto;object-fit:contain;border-radius:12px;background:#fff;border:1px solid var(--border)}
.op-logo--text{width:64px;height:64px;display:grid;place-items:center;background:var(--brand-ink);color:#fff;font:700 20px Rubik;border:0}

/* ---------- listing rows ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:.6em 0 1em}
.filters button{border:1px solid var(--border);background:var(--bg);color:var(--heading);font:600 14px "Source Sans 3";padding:8px 12px;border-radius:99px;cursor:pointer}
.filters button.on{background:var(--brand-ink);color:#fff;border-color:var(--brand-ink)}
.rows{list-style:none;padding:0!important;margin:0;counter-reset:r}
.row{display:grid;grid-template-columns:38px 72px minmax(0,1fr) 190px;gap:16px;align-items:start;border:1px solid var(--border);border-radius:14px;padding:16px;margin:0 0 12px!important;background:var(--bg)}
.row[hidden]{display:none}
.row-rank{background:var(--rank-badge-bg);color:#fff;font:700 15px/1 Rubik;border-radius:8px;width:34px;height:34px;display:grid;place-items:center}
.row .op-logo{margin:0;width:72px;height:72px}
.row-main h3{margin:0 0 .2em;font-size:1.2rem}
.row-score{font:600 14px Rubik;color:#fff;background:var(--brand-ink);padding:3px 7px;border-radius:6px;margin-left:6px;vertical-align:2px}
.row-offer{margin:.3em 0 .5em}
.row-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:6px 14px;margin:0 0 .5em;font-size:14px}
.row-facts dt{font-weight:700;color:var(--heading);font-size:12.5px;text-transform:uppercase;letter-spacing:.04em}
.row-facts dd{margin:0}
.row details{font-size:14.5px}.row summary{cursor:pointer;color:var(--link);font-weight:600}
.row-cta{display:flex;flex-direction:column;gap:6px;text-align:center}
.row-cta small{font-size:11.5px;color:var(--brand-ink-700)}
@media(max-width:760px){.row{grid-template-columns:34px 56px minmax(0,1fr)}.row .op-logo{width:56px;height:56px}.row-cta{grid-column:1/-1}}
.geo-note{display:none;background:var(--accent-tint-8);border:1px solid var(--accent-tint-16);border-radius:10px;padding:12px 14px}
body.geo-on [data-geo="offshore"],body.geo-ab [data-geo="offshore"]{display:none!important}
body.geo-on .geo-note[data-geo="on-only"],body.geo-ab .geo-note[data-geo="ab-only"]{display:block}

/* ---------- review / game ---------- */
.rv-head{display:grid;grid-template-columns:110px 96px minmax(0,1fr);gap:18px;align-items:center;border:1px solid var(--border);border-radius:14px;padding:18px;margin:6px 0 16px;background:var(--bg-zebra)}
.rv-head .op-logo{margin:0;width:96px;height:96px}
.rv-score{width:96px;height:96px;border-radius:50%;background:var(--brand-ink);color:#fff;display:grid;place-content:center;text-align:center;font-family:Rubik}
.rv-score b{font-size:32px;line-height:1}.rv-score span{font-size:13px;opacity:.8}
.rv-score--on{font:700 22px Rubik}
.rv-bonus{margin:0 0 .6em;font:700 1.15rem/1.3 Rubik;color:var(--heading)}.rv-bonus span{display:block;font:700 11.5px Rubik;letter-spacing:.12em;color:var(--brand-ink-700);text-transform:uppercase}
.rv-meta,.rv-age{font-size:13.5px;color:var(--brand-ink-700);margin:.5em 0 0}
@media(max-width:640px){.rv-head{grid-template-columns:80px 80px;}.rv-head .rv-main{grid-column:1/-1}.rv-head .op-logo,.rv-score{width:80px;height:80px}}
.rv-head--status{grid-template-columns:96px minmax(0,1fr);border-color:var(--brand-warning);background:#FFF8EA}
.badge-status{display:inline-block;background:var(--brand-ink);color:#fff;font:700 13px Rubik;padding:5px 10px;border-radius:6px}
.gamebox{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:18px;margin:6px 0 16px;align-items:start}
@media(max-width:640px){.gamebox{grid-template-columns:1fr}}
.game-cover{width:100%;border-radius:12px;border:1px solid var(--border);display:block}
.game-cover--none{aspect-ratio:4/3;display:grid;place-content:center;text-align:center;background:var(--brand-ink);color:#fff;font:700 20px Rubik}
.game-cover--none small{display:block;font:400 13px "Source Sans 3";opacity:.75;margin-top:6px}
.gamebox .table-wrap,.gamebox table{margin:0}

/* ---------- misc blocks ---------- */
.qa{border:1px solid var(--border);border-radius:10px;margin:0 0 8px;background:var(--bg)}
.qa summary{cursor:pointer;padding:12px 14px;font:600 1.02rem Rubik;color:var(--heading)}
.qa>div{padding:0 14px 6px}
.help{border:2px solid var(--brand-accent);border-radius:12px;padding:12px 16px;margin:1em 0;background:var(--accent-tint-8)}
.help h3{margin:.2em 0 .4em}
.author{display:flex;gap:14px;align-items:flex-start;border-top:1px solid var(--border);margin-top:32px;padding-top:18px;font-size:15px}
.author img{background:var(--header-band);border-radius:6px;padding:3px;flex:none}
.author-name{font-weight:700;color:var(--heading);margin:0 0 .2em}
.related{border:1px solid var(--border);border-radius:12px;padding:6px 16px;margin-top:24px;background:var(--bg-zebra)}
.related h2{font-size:1.1rem}
.newslist li{margin:.5em 0}
.cols{columns:2 260px;font-size:15px}
.sec--update{border:1px solid var(--accent-tint-16);background:var(--accent-tint-8);border-radius:12px;padding:2px 18px 6px;margin-top:10px}
.calc{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;border:1px solid var(--border);border-radius:12px;padding:16px;background:var(--bg-zebra);margin:1em 0}
.calc label{display:flex;flex-direction:column;font-weight:600;font-size:14px;color:var(--heading);gap:4px}
.calc input,.calc select{font:inherit;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text)}
.calc-out{grid-column:1/-1;font:600 1.05rem/1.5 "Source Sans 3";color:var(--heading);background:var(--bg);border-radius:8px;padding:10px 12px;border:1px solid var(--border)}

/* ---------- footer ---------- */
.foot{background:var(--footer-bg);color:var(--footer-text);font-size:14.5px}
.foot-in{max-width:1240px;margin:auto;padding:34px 16px 26px;display:grid;grid-template-columns:1.2fr 1fr 1.2fr;gap:28px}
@media(max-width:860px){.foot-in{grid-template-columns:1fr}}
.foot-brand img{background:var(--header-band);border-radius:8px;padding:4px}
.foot a{color:#fff}
.foot-links{list-style:none;padding:0;margin:0;columns:2}
.foot-links li{margin:0 0 .5em}
.foot-rg img{float:left;margin:0 12px 6px 0;background:#fff;border-radius:50%}
.foot-copy{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.15);padding-top:14px;margin:0;color:var(--brand-ink-200)}

/* ---------- overlays ---------- */
.modal{position:fixed;inset:0;background:rgba(18,18,18,.72);display:grid;place-items:center;z-index:100;padding:16px}
.modal[hidden]{display:none}
.modal-box{background:var(--bg);color:var(--text);max-width:460px;border-radius:14px;padding:22px 22px 10px;border-top:6px solid var(--brand-accent)}
.modal-box h2{margin-top:0}
.cookie,.langbar{position:fixed;left:16px;right:16px;bottom:16px;z-index:90;background:var(--brand-ink);color:#fff;border-radius:12px;padding:12px 16px;max-width:760px;margin:auto;box-shadow:0 8px 30px rgba(0,0,0,.3);font-size:15px}
.cookie[hidden],.langbar[hidden]{display:none}
.cookie a,.langbar a:not(.btn){color:#fff}
.cookie p,.langbar p{margin:.3em 0}
.langbar{bottom:auto;top:96px}
.langbar .x{background:none;border:0;color:#fff;font-size:22px;cursor:pointer;float:right;line-height:1}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .rv-head--status{background:#2a2414}}
.bonus-note{font-size:12px;color:var(--brand-ink-700);margin:-.2em 0 .5em;font-style:italic}
.linkbtn{background:none;border:0;color:#fff;text-decoration:underline;cursor:pointer;font:inherit;padding:0}