/* Prestige: smoked plum, champagne metal and warm linen. */
[data-skin="prestige"] {
  --bg: #171419; --bg-2: #100e12; --card: rgba(31,25,31,.94); --card-focus: #44363b;
  --stroke: rgba(227,198,151,.3); --focus: #e3c697; --focus-soft: rgba(227,198,151,.18);
  --text: #fff7ec; --muted: #d0c5c1; --accent: #81623d; --radius: 6px;
}
[data-skin="prestige"] .bg::after { background: linear-gradient(rgba(15,12,18,.28), rgba(15,12,18,.1) 35%, rgba(15,12,18,.88)); }
[data-skin="prestige"] .topbar { background: rgba(19,15,21,.72); border-bottom: 1px solid rgba(227,198,151,.25); }
[data-skin="prestige"] .btn { border-radius: 4px; }

/* Grand Hotel: warm brass and deep olive, paired with a paper directory. */
[data-skin="grand"] {
  --bg: #252b27; --bg-2: #161d19; --card: rgba(31,39,33,.94); --card-focus: #3d493e;
  --stroke: rgba(212,184,132,.3); --focus: #e4bf80; --focus-soft: rgba(186,148,89,.25);
  --text: #fff8ec; --muted: #d4cbbb; --accent: #79603b; --radius: 4px;
}
[data-skin="grand"] .bg::after { background: linear-gradient(90deg, rgba(12,22,17,.25), rgba(12,22,17,.45)); }
[data-skin="grand"] .topbar { background: rgba(18,28,22,.82); border-bottom: 1px solid rgba(212,184,132,.3); }
[data-skin="grand"] .btn { border-radius: 4px; }

/* Aurora: deep ocean tones with a luminous mint focus. */
[data-skin="aurora"] {
  --bg: #071e25; --bg-2: #041317;
  --card: rgba(8,25,30,.86); --card-focus: #204d53;
  --stroke: rgba(168,245,213,.25); --focus: #a8f5d5;
  --focus-soft: rgba(168,245,213,.18); --text: #f2fff9;
  --muted: #bad3cf; --accent: #28786f; --radius: 18px;
}
[data-skin="aurora"] .bg::after {
  background: linear-gradient(115deg, rgba(4,19,23,.45), rgba(7,30,37,.60));
}
[data-skin="aurora"] .topbar { background: rgba(4,19,23,.55); border-bottom: 1px solid var(--stroke); }
[data-skin="aurora"] .tile:focus, [data-skin="aurora"] .tile:hover {
  background: #204d53; color: #f2fff9; border-color: #a8f5d5;
  box-shadow: 0 0 0 2px #a8f5d5, 0 6px 20px rgba(0,0,0,.25);
}
[data-skin="aurora"] .tile:focus .desc, [data-skin="aurora"] .tile:hover .desc { color: #d0e5df; }
[data-skin="aurora"] .greeting h1, [data-skin="aurora"] .greeting p { text-shadow: 0 2px 12px rgba(0,0,0,.8); }

/* ============================================================
   Skins.

   A skin is the sixteen tokens app.css is built on, swapped, plus
   a handful of rules for the things a palette cannot say: which
   typeface, how round a corner is, and whether the hotel's photo
   is part of the design or in the way of it.

   No skin touches markup or JavaScript. Adding one is a block here
   and a line in SKINS (js/app.js).

   "midnight" is the default and lives in app.css itself, so a TV
   that never loads this file still looks right.
   ============================================================ */

/* ---------- DARK — midnight with the colour taken out ---------- */
[data-skin="dark"] {
  --bg: #000; --bg-2: #000;
  --card: rgba(20,20,20,.8); --card-focus: rgba(30,30,30,.95);
}

/* ---------- IVORY — light editorial, boutique ---------- */
[data-skin="ivory"] {
  --bg: #f4f1ea; --bg-2: #eae5db;
  --card: rgba(255,255,255,.86); --card-focus: #ffffff;
  --stroke: rgba(40,36,30,.14);
  --focus: #9a7b3f; --focus-soft: rgba(154,123,63,.22);
  --text: #232019; --muted: #6d665a;
  --accent: #3d5a80; --radius: 4px;
}
[data-skin="ivory"] body { font-family: "Iowan Old Style", Georgia, "Times New Roman", serif; }
[data-skin="ivory"] .bg::after {
  background: linear-gradient(rgba(244,241,234,.94) 0%, rgba(244,241,234,.90) 100%);
}
[data-skin="ivory"] .tile { border: 1px solid var(--stroke); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
[data-skin="ivory"] .greeting h1 { font-weight: 400; letter-spacing: .01em; }
[data-skin="ivory"] .topbar .clock { font-weight: 300; }
/* The icon set is drawn white, for dark skins. On a light ground it has to be
   turned over, or it disappears into the card. */
[data-skin="ivory"] .tile img,
[data-skin="ivory"] .row .card .img img,
[data-skin="ivory"] .topbar .set-btn img,
[data-skin="ivory"] .assistant-heading img {
  filter: invert(1) sepia(40%) saturate(260%) hue-rotate(357deg) brightness(.62);
}
[data-skin="ivory"] .row .card .img img { filter: none; }   /* photographs, not icons */
[data-skin="ivory"] .row .card .img.icon img { filter: brightness(0); }

/* ---------- NOIR — near-black and champagne, five-star ---------- */
[data-skin="noir"] {
  --bg: #0a0a0b; --bg-2: #050506;
  --card: rgba(255,255,255,.055); --card-focus: rgba(198,168,109,.16);
  --stroke: rgba(198,168,109,.28);
  --focus: #c6a86d; --focus-soft: rgba(198,168,109,.2);
  --text: #f2efe9; --muted: #8e887c;
  --accent: #c6a86d; --radius: 0px;
}
[data-skin="noir"] body { font-family: "Optima", "Gill Sans", Palatino, Georgia, serif; letter-spacing: .015em; }
/* A five-star room is not a photograph with the lights off. The picture goes;
   what is left is black, a hairline of champagne, and a lot of air. */
[data-skin="noir"] .bg { background-image: none !important; }
[data-skin="noir"] .bg::after {
  background: radial-gradient(120% 80% at 50% 0%, #141416 0%, #050506 62%);
}
[data-skin="noir"] .tile { border: 1px solid var(--stroke); }
[data-skin="noir"] .tile .name { font-weight: 400; letter-spacing: .14em; text-transform: uppercase; font-size: .95em; }
[data-skin="noir"] .tile.big .name { font-size: 1.15em; }
[data-skin="noir"] .tile .desc { letter-spacing: .06em; font-size: .72em; text-transform: lowercase; }
[data-skin="noir"] .greeting h1 { font-weight: 300; letter-spacing: .06em; }
[data-skin="noir"] .row h2 { letter-spacing: .22em; }

/* ---------- SAHARA — sand and gold ---------- */
[data-skin="sahara"] {
  --bg: #2a1f16; --bg-2: #1a120c;
  --card: rgba(92,68,44,.55); --card-focus: rgba(124,92,56,.75);
  --stroke: rgba(214,178,116,.30);
  --focus: #e3b65c; --focus-soft: rgba(227,182,92,.28);
  --text: #fbf3e6; --muted: #cbb694;
  --accent: #d98d4a; --radius: 16px;
}
[data-skin="sahara"] .bg::after {
  background: linear-gradient(rgba(26,18,12,.80) 0%, rgba(42,31,22,.55) 40%, rgba(26,18,12,.86) 100%);
}
[data-skin="sahara"] .tile { border: 1px solid var(--stroke); }
[data-skin="sahara"] .tile.big { border-color: rgba(227,182,92,.45); }
[data-skin="sahara"] .greeting h1 { font-weight: 300; }

/* ---------- SLATE — flat and high contrast, business hotel ---------- */
[data-skin="slate"] {
  --bg: #263238; --bg-2: #1b2226;
  --card: #33434c; --card-focus: #405360;
  --stroke: rgba(255,255,255,.10);
  --focus: #4fc3f7; --focus-soft: rgba(79,195,247,.25);
  --text: #ffffff; --muted: #a7b6bf;
  --accent: #4fc3f7; --radius: 6px;
}
[data-skin="slate"] body { font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
/* No photograph at all: the tiles carry the screen, which is what a guest here
   wants at seven in the morning. It also spares a cheap panel the gradient. */
[data-skin="slate"] .bg { background-image: none !important; }
[data-skin="slate"] .bg::after { background: none; }
[data-skin="slate"] .tile { border: none; }
[data-skin="slate"] .tile .name { font-weight: 700; }
[data-skin="slate"] .greeting h1 { font-weight: 600; }
[data-skin="slate"] .greeting { margin-bottom: 10px; }

/* Cinema's original charcoal, bronze frame and warm circular selection. */
[data-skin="cinema-classic"] {
  --bg: #141414; --bg-2: #080808;
  --card: #24221d; --card-focus: #3d321c;
  --stroke: #665b48;
  --focus: #c6aa72; --focus-soft: rgba(198,170,114,.25);
  --text: #ffffff; --muted: #bfbdbb;
  --accent: #c6aa72; --radius: 10px;
}
[data-skin="cinema-classic"][data-layout="cinema"][data-route="home"] .bg::after {
  display: block;
  background: linear-gradient(rgba(0,0,0,.72), rgba(0,0,0,.67) 55%, rgba(0,0,0,.94));
}
[data-skin="cinema-classic"][data-layout="cinema"] .greeting { --text: #bfbdbb; }

/* Ribbon's original navy branding, white strip and silver selection.
   Keep the surrounding app dark; the menu has its own light surfaces. */
[data-skin="ribbon-classic"] {
  --bg: #0f1c33; --bg-2: #060e1b;
  --card: #263244; --card-focus: #3b485b;
  --stroke: rgba(197,202,210,.25);
  --focus: #c5cad2; --focus-soft: rgba(197,202,210,.2);
  --text: #ffffff; --muted: #bfbdbb;
  --accent: #3f8ee6; --radius: 10px;
}
[data-skin="ribbon-classic"][data-layout="ribbon"][data-route="home"] .bg::after {
  display: block;
  background: linear-gradient(rgba(0,0,0,.72), rgba(0,0,0,.67) 55%, rgba(0,0,0,.94));
}
[data-skin="ribbon-classic"][data-layout="ribbon"] [data-home-menu] {
  --bg-2: #ffffff; --card-focus: #e0e1e3;
  --focus: #0f1c33; --text: #080808; --muted: #666666;
}
[data-skin="ribbon-classic"][data-layout="ribbon"] .greeting { --text: #bfbdbb; }
[data-skin="ribbon-classic"][data-layout="ribbon"][data-route="home"] .grid > .tile img { filter: brightness(0); }
[data-skin="ribbon-classic"][data-layout="ribbon"] .ribbon-next {
  --bg: #ffffff; --text: #09121e;
  --stroke: rgba(255,255,255,.7); --focus-soft: rgba(255,255,255,.12);
}
[data-skin="ribbon-classic"][data-layout="ribbon"][data-route="home"] .ribbon-next:focus,
[data-skin="ribbon-classic"][data-layout="ribbon"][data-route="home"] .ribbon-next:hover {
  box-shadow: 0 12px 30px rgba(0,0,0,.55), 0 0 0 3px rgba(255,255,255,.45), 0 0 24px rgba(255,255,255,.3);
}

/* The drop shadows exist to lift white text off a photograph. Skins without one
   do not need them, and on a light ground they read as a smudge. */
[data-skin="ivory"] .greeting h1, [data-skin="ivory"] .greeting p, [data-skin="ivory"] .row h2,
[data-skin="slate"] .greeting h1, [data-skin="slate"] .greeting p, [data-skin="slate"] .row h2,
[data-skin="noir"]  .greeting h1, [data-skin="noir"]  .greeting p { text-shadow: none; }