/* skins.css — L'Aula de la Laia Sis pells via . Quadern/Nau/Llum venen del mockup (../aula-mockups.html); Ocea/Bosc/Retro són noves, reutilitzant les mateixes 5 famílies tipogràfiques ja carregades (Caveat, Inter, Space Grotesk, JetBrains Mono, Nunito) — cap petició de font nova. Totes les pells defineixen el mateix contracte de variables; app.css només en consumeix noms, mai valors fixos. Contrast mesurat i vigilat per tests/ui_tokens_suite.php (I2D-C, 14/09/2026), tots ≥ 4,5:1: --text sobre --bg2, --text-dim sobre --bg2, --laia-bubble-fg sobre --accent, --badge2-fg sobre --badge2-bg i --text sobre --accent-soft. La frase anterior («AA sobre --bg2/--text») només cobria fons neutres i no els fons d'accent, que és per on es va colar el defecte reparat en aquest increment (I2D-REPARACIONS-VISUALS §5). NOTA DE CONSTRUCCIÓ (14/09/2026): a llum i ocea, --badge1-bg és idèntic a --accent (com --laia-bubble-bg) però el brief §5.3 no incloïa --badge1-fg a la llista de 5 valors a corregir; tests/ui_tokens_suite.php (T34.6) el va caçar amb els mateixos 2,79/3,19 que --laia-bubble-fg tenia abans del fix. Es corregeix aquí amb el mateix valor ja verificat per a --laia-bubble-fg d'aquestes dues pells (mateix fons, mateix parell de color correcte); .subject-badge (app.css) i .rl-badge (roles.css) en són els consumidors reals. */ /* ===== QUADERN (per defecte) ===== */ html[data-skin="quadern"]{ --bg:#eee1bf; --bg2:#fffaf0; --bg3:#f5ead0; --border:rgba(120,90,40,.24); --text:#2c2314; --text-dim:#6b5a3e; --accent:#2f5d9e; --accent2:#c1633d; --radius-card:10px; --shadow:0 5px 16px rgba(94,63,20,.16); --font-head:'Caveat',cursive; --font-body:'Inter',sans-serif; --font-mono:'JetBrains Mono',monospace; --board-accent:#c1633d; --board-line:#2f5d9e; --focus:#2f5d9e; --badge1-bg:#2f5d9e; --badge1-fg:#fff; --badge2-bg:#c1633d; --badge2-fg:#0c0803; --gat-bubble-bg:#fbf3dc; --gat-bubble-fg:#2c2314; --gat-bubble-border:rgba(47,93,158,.32); --laia-bubble-bg:#2f5d9e; --laia-bubble-fg:#fff; --card-bg:#fffaf0; --accent-soft:#d9d6c9; } html[data-skin="quadern"] .app-shell{background: radial-gradient(circle at 14% -6%,rgba(255,250,240,.85) 0%,transparent 52%), repeating-linear-gradient(118deg,rgba(120,90,40,.035) 0 2px,transparent 2px 7px), linear-gradient(180deg,#f5ead0,#e7d9ae);} html[data-skin="quadern"] .brand-name{transform:rotate(-1.2deg);display:inline-block;} html[data-skin="quadern"] .card-title{font-family:var(--font-head);font-size:17px;text-transform:none;letter-spacing:0;font-weight:700;color:var(--accent2);} html[data-skin="quadern"] .col-title{transform:rotate(-1deg);display:inline-block;} html[data-skin="quadern"] .chat-messages{ background-image:repeating-linear-gradient(to bottom,transparent 0 30px,rgba(47,93,158,.16) 30px 31px); background-position:0 10px;position:relative;padding-left:48px;} html[data-skin="quadern"] .chat-messages::before{content:"";position:absolute;left:35px;top:0;bottom:0;width:1.5px;background:rgba(193,99,61,.5);} /* ===== NAU ===== */ html[data-skin="nau"]{ --bg:#070b1a; --bg2:#0d1430; --bg3:#111a3d; --border:rgba(94,234,212,.22); --text:#e7ecff; --text-dim:#a6b1de; --accent:#5eead4; --accent2:#a78bfa; --radius-card:10px; --shadow:0 0 0 1px rgba(94,234,212,.07),0 10px 26px rgba(0,0,0,.5); --font-head:'Space Grotesk',sans-serif; --font-body:'Space Grotesk',sans-serif; --font-mono:'JetBrains Mono',monospace; --board-accent:#5eead4; --board-line:#a78bfa; --focus:#5eead4; --badge1-bg:#6d5bd0; --badge1-fg:#fff; --badge2-bg:#0f7a86; --badge2-fg:#fff; --gat-bubble-bg:#0f1730; --gat-bubble-fg:#e7ecff; --gat-bubble-border:rgba(167,139,250,.35); --laia-bubble-bg:#5eead4; --laia-bubble-fg:#062621; --card-bg:#0d1430; --accent-soft:#1c3752; } html[data-skin="nau"] .app-shell{background:linear-gradient(180deg,#070b1a,#0a1024);position:relative;} html[data-skin="nau"] .app-shell::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.7; background-image: radial-gradient(1.6px 1.6px at 8% 22%,#ffffff 50%,transparent 60%), radial-gradient(1px 1px at 26% 68%,#ffffff 50%,transparent 60%), radial-gradient(1.6px 1.6px at 52% 12%,#9fd8ff 50%,transparent 60%), radial-gradient(1px 1px at 68% 46%,#ffffff 50%,transparent 60%), radial-gradient(1.6px 1.6px at 84% 78%,#c8b6ff 50%,transparent 60%), radial-gradient(1px 1px at 94% 28%,#ffffff 50%,transparent 60%); background-size:280px 280px;background-repeat:repeat;} html[data-skin="nau"] .brand-name{background:linear-gradient(90deg,#5eead4,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent;} html[data-skin="nau"] .card:hover{box-shadow:0 0 0 1px rgba(94,234,212,.55),0 0 18px rgba(94,234,212,.22),0 8px 20px rgba(0,0,0,.4);} /* ===== LLUM ===== */ html[data-skin="llum"]{ --bg:#f5f7fb; --bg2:#ffffff; --bg3:#eef2f8; --border:rgba(15,23,42,.1); --text:#1f2937; --text-dim:#57627a; --accent:#ff6b5e; --accent2:#0f9488; --radius-card:16px; --shadow:0 2px 12px rgba(15,23,42,.07); --font-head:'Nunito',sans-serif; --font-body:'Nunito',sans-serif; --font-mono:'JetBrains Mono',monospace; --board-accent:#ff6b5e; --board-line:#0f9488; --focus:#0f9488; --badge1-bg:#ff6b5e; --badge1-fg:#2e0a05; --badge2-bg:#0f9488; --badge2-fg:#021a17; --gat-bubble-bg:#eef2f8; --gat-bubble-fg:#1f2937; --gat-bubble-border:rgba(15,23,42,.08); --laia-bubble-bg:#ff6b5e; --laia-bubble-fg:#2e0a05; --card-bg:#ffffff; --accent-soft:#f0dfe2; } html[data-skin="llum"] .app-shell{background:var(--bg);} html[data-skin="llum"] .gat-avatar{background:linear-gradient(135deg,var(--accent),#ff8f79);} /* ===== OCEA (nova) ===== */ html[data-skin="ocea"]{ --bg:#e6f5f7; --bg2:#ffffff; --bg3:#d7edf1; --border:rgba(8,90,105,.2); --text:#0b3a42; --text-dim:#3f707a; --accent:#0f9dbd; --accent2:#ff9f45; --radius-card:16px; --shadow:0 6px 18px rgba(8,90,105,.14); --font-head:'Space Grotesk',sans-serif; --font-body:'Inter',sans-serif; --font-mono:'JetBrains Mono',monospace; --board-accent:#ff9f45; --board-line:#0f9dbd; --focus:#0f9dbd; --badge1-bg:#0f9dbd; --badge1-fg:#04222a; --badge2-bg:#ff9f45; --badge2-fg:#3a2100; --gat-bubble-bg:#eaf8fa; --gat-bubble-fg:#0b3a42; --gat-bubble-border:rgba(15,157,189,.3); --laia-bubble-bg:#0f9dbd; --laia-bubble-fg:#04222a; --card-bg:#ffffff; --accent-soft:#bbe2ea; } html[data-skin="ocea"] .app-shell{background: radial-gradient(ellipse at 50% -10%,rgba(255,255,255,.9),transparent 55%), linear-gradient(180deg,#eafaff 0%,#cdeef4 55%,#b7e4ec 100%);position:relative;} html[data-skin="ocea"] .app-shell::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5; background-image: radial-gradient(7px 7px at 12% 85%,rgba(15,157,189,.18) 50%,transparent 55%), radial-gradient(5px 5px at 30% 70%,rgba(15,157,189,.14) 50%,transparent 55%), radial-gradient(4px 4px at 70% 90%,rgba(15,157,189,.16) 50%,transparent 55%), radial-gradient(6px 6px at 85% 65%,rgba(15,157,189,.12) 50%,transparent 55%); background-size:220px 220px;background-repeat:repeat;} html[data-skin="ocea"] .brand-name{color:var(--accent);} /* ===== BOSC (nova) ===== */ html[data-skin="bosc"]{ --bg:#eef3e2; --bg2:#fbfbf3; --bg3:#e3ecd1; --border:rgba(60,80,30,.22); --text:#233016; --text-dim:#5b6b45; --accent:#4c7a3a; --accent2:#b5651d; --radius-card:12px; --shadow:0 5px 16px rgba(50,60,20,.14); --font-head:'Caveat',cursive; --font-body:'Inter',sans-serif; --font-mono:'JetBrains Mono',monospace; --board-accent:#b5651d; --board-line:#4c7a3a; --focus:#4c7a3a; --badge1-bg:#4c7a3a; --badge1-fg:#fff; --badge2-bg:#b5651d; --badge2-fg:#140902; --gat-bubble-bg:#f2f6e6; --gat-bubble-fg:#233016; --gat-bubble-border:rgba(76,122,58,.3); --laia-bubble-bg:#4c7a3a; --laia-bubble-fg:#fff; --card-bg:#fbfbf3; --accent-soft:#cedcbc; } html[data-skin="bosc"] .app-shell{background: radial-gradient(circle at 85% 0%,rgba(255,255,255,.5),transparent 50%), linear-gradient(180deg,#eef3e2,#dbe6c4);position:relative;} html[data-skin="bosc"] .app-shell::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.16; background-image:radial-gradient(3px 3px at 20% 30%,#4c7a3a 50%,transparent 55%), radial-gradient(3px 3px at 60% 65%,#4c7a3a 50%,transparent 55%), radial-gradient(3px 3px at 85% 20%,#4c7a3a 50%,transparent 55%), radial-gradient(3px 3px at 40% 85%,#4c7a3a 50%,transparent 55%); background-size:180px 180px;background-repeat:repeat;} html[data-skin="bosc"] .brand-name{transform:rotate(-1deg);display:inline-block;color:var(--accent);} html[data-skin="bosc"] .card-title{font-family:var(--font-head);font-size:17px;text-transform:none;letter-spacing:0;font-weight:700;color:var(--accent2);} /* ===== RETRO (nova) ===== */ html[data-skin="retro"]{ --bg:#1b1030; --bg2:#241542; --bg3:#2d1a52; --border:rgba(255,111,199,.3); --text:#f5e9ff; --text-dim:#c3aee4; --accent:#ff5da2; --accent2:#57e2e0; --radius-card:6px; --shadow:0 0 0 1px rgba(255,93,162,.18),0 8px 22px rgba(0,0,0,.5); --font-head:'JetBrains Mono',monospace; --font-body:'Nunito',sans-serif; --font-mono:'JetBrains Mono',monospace; --board-accent:#57e2e0; --board-line:#ff5da2; --focus:#57e2e0; --badge1-bg:#ff5da2; --badge1-fg:#1b1030; --badge2-bg:#57e2e0; --badge2-fg:#1b1030; --gat-bubble-bg:#2d1a52; --gat-bubble-fg:#f5e9ff; --gat-bubble-border:rgba(87,226,224,.35); --laia-bubble-bg:#ff5da2; --laia-bubble-fg:#1b1030; --card-bg:#241542; --accent-soft:#4a235d; } html[data-skin="retro"] .app-shell{background: repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px), linear-gradient(180deg,#1b1030,#150c26);position:relative;} html[data-skin="retro"] .app-shell::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5; background-image:linear-gradient(rgba(255,93,162,.14) 1px,transparent 1px), linear-gradient(90deg,rgba(87,226,224,.1) 1px,transparent 1px); background-size:34px 34px;} html[data-skin="retro"] .brand-name{color:var(--accent2);text-shadow:0 0 8px rgba(87,226,224,.55);} html[data-skin="retro"] .card,html[data-skin="retro"] .doc-item,html[data-skin="retro"] .subject-card{ box-shadow:0 0 0 1px var(--border);}