/* Light look of the area (Aspetto: Chiaro, or Come il sistema with a light system), loaded after css/area.css.
   The colors are the ones of the light look of the wallet dashboard (wallet_app/styles.css), same brand.
   "Come il sistema" is turned into light or dark by the scripts (html data-theme), so only one block here. */

:root[data-theme="light"] {
  color-scheme: light;

  --bg: #F5F5F7;
  --surface: #FFFFFF;
  --surface-2: #F1F1F4;
  --surface-3: #E6E6EB;
  --line: rgba(17, 17, 21, 0.09);
  --line-strong: rgba(17, 17, 21, 0.17);
  --shell: rgba(17, 17, 21, 0.035);
  --shell-line: rgba(17, 17, 21, 0.07);
  --highlight: rgba(255, 255, 255, 0.9);

  --ink: #111115;
  --ink-2: #3D3D45;
  --muted: #6A6A75;
  --on-ink: #F5F5F7;

  --accent: #0A8F66;
  --accent-soft: rgba(10, 143, 102, 0.12);
  --accent-line: rgba(10, 143, 102, 0.32);
  --violet: #7A52BD;
  --violet-soft: rgba(122, 82, 189, 0.12);
  --violet-line: rgba(122, 82, 189, 0.32);

  --gain: #0a8aa3; --gain-soft: rgba(10, 138, 163, 0.12); --gain-ink: #0b6f84;
  --loss: #c9472c; --loss-soft: rgba(201, 71, 44, 0.11); --loss-ink: #ad3a22;

  --shadow-pop: 0 16px 40px rgba(17, 17, 21, 0.12), 0 2px 8px rgba(17, 17, 21, 0.08);
}

/* The logos are white: dark on the light look */
:root[data-theme="light"] .m-brand img,
:root[data-theme="light"] .m-wall-top img { filter: invert(1); }

/* Colors written in the rules of css/area.css for the dark look */
:root[data-theme="light"] body { background-image: radial-gradient(1100px 560px at 15% -10%, rgba(122, 82, 189, 0.07), transparent 70%); }
:root[data-theme="light"] .m-bar { background: rgba(255, 255, 255, 0.86); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-theme="light"] .m-bar { background: rgba(255, 255, 255, 0.72); }
}
:root[data-theme="light"] .m-nav a:hover,
:root[data-theme="light"] .m-btn.quiet:hover { background: rgba(17, 17, 21, 0.05); }
:root[data-theme="light"] .m-btn.primary:hover { background: #2A2A31; }
:root[data-theme="light"] .m-well { background: rgba(255, 255, 255, 0.14); }
:root[data-theme="light"] .m-btn.secondary:hover,
:root[data-theme="light"] .m-input:hover { border-color: rgba(17, 17, 21, 0.26); }
:root[data-theme="light"] .m-error { color: #B3261E; }
:root[data-theme="light"] .m-mark { background: linear-gradient(160deg, rgba(122, 82, 189, 0.14), rgba(122, 82, 189, 0.04)); box-shadow: inset 0 0 0 1px var(--accent-line), inset 0 0 0 5px rgba(255, 255, 255, 0.6), inset 0 0 0 6px rgba(122, 82, 189, 0.18); }
:root[data-theme="light"] .m-mark.neutral { background: linear-gradient(160deg, rgba(17, 17, 21, 0.05), rgba(17, 17, 21, 0.01)); box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 0 0 5px rgba(255, 255, 255, 0.6), inset 0 0 0 6px rgba(17, 17, 21, 0.06); }
:root[data-theme="light"] a.m-card:hover .m-mark,
:root[data-theme="light"] a.m-tile:hover .m-mark:not(.neutral) { box-shadow: inset 0 0 0 1px rgba(122, 82, 189, 0.6), inset 0 0 0 5px rgba(255, 255, 255, 0.6), inset 0 0 0 6px rgba(122, 82, 189, 0.32), 0 0 22px rgba(122, 82, 189, 0.16); }
:root[data-theme="light"] a.m-card:hover,
:root[data-theme="light"] a.m-tile:hover { background: #FAFAFC; }
:root[data-theme="light"] .m-skel::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent); }
:root[data-theme="light"] .m-loader .ring { fill: rgba(17, 17, 21, 0.12); }
:root[data-theme="light"] .m-btn.primary .m-loader .ring { fill: rgba(255, 255, 255, 0.2); }
:root[data-theme="light"] .m-btn.primary .m-kbd { border-color: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.75); }
:root[data-theme="light"] .m-tabbar { background: rgba(255, 255, 255, 0.86); }

/* The wall and the glass of the login, logout and error pages */
:root[data-theme="light"] .m-wall-tile { background: rgba(17, 17, 21, 0.03); border-color: rgba(17, 17, 21, 0.07); }
:root[data-theme="light"] .m-glass { background: rgba(17, 17, 21, 0.04); box-shadow: inset 0 0 0 1px rgba(17, 17, 21, 0.08), 0 50px 100px -40px rgba(17, 17, 21, 0.35); }
:root[data-theme="light"] .m-glass-core { background: rgba(255, 255, 255, 0.86); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-theme="light"] .m-glass-core { background: rgba(255, 255, 255, 0.66); }
}
@media (prefers-reduced-transparency: reduce), (hover: none) {
  :root[data-theme="light"] .m-glass-core { background: rgba(255, 255, 255, 0.94); }
}

/* The video stays on black in both looks: the player keeps the colors of the dark look */
:root[data-theme="light"] .m-viewer {
  --ink: #FFFFFF; --ink-2: #A8A8B3; --muted: #82828D; --on-ink: #111115;
  --line: rgba(255, 255, 255, 0.08); --line-strong: rgba(255, 255, 255, 0.16);
  --surface: #18181D; --surface-2: #1F1F25;
  color: var(--ink);
}
:root[data-theme="light"] .m-viewer .m-mark.neutral { background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)); box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 0 0 5px rgba(17, 17, 21, 0.35), inset 0 0 0 6px rgba(255, 255, 255, 0.06); }

/* Site additions (css/area_site.css) */
:root[data-theme="light"] #cookie-msg { background: rgba(255, 255, 255, 0.96); }
/* The calendar of Google is white: no inversion on the light look */
:root[data-theme="light"] .m-calendar { filter: none; }