/* ============================================================
   mysociale.net — TOKEN del design (strato "tokens", DESIGN.md 1 e 12).
   L'unico posto dove si scrivono colori, ombre, raggi, spazi e livelli (z-index) come valori.
   Chiaro in :root, scuro in :root[data-theme="dark"] (il tema lo decide lo script nel <head> di app/layout.js).
   Ordine degli strati: @layer reset, legacy, tokens, base, layout, components, pages, utilities (app/layout.js).
   Se si rilancia design/import_design.py, i token che rimette in testa a sociale.css vanno tolti di nuovo da li'.
   ============================================================ */

/* ---------- tema chiaro (prima in sociale.css) */
:root{
  /* colori base — blu notte, blu elettrico, ciano, viola, oro */
  --background:#ffffff;
  --foreground:#0A1240;
  --ink:#0A1240;           /* blu notte: testi e contorni cartoon */
  --ink-2:#111B55;
  --ink-3:#1A2A78;
  --text:#0A1240;
  --muted:#4B5687;
  --subtle:#5F6990;         /* 4.8:1 sulla tela, 5.4:1 sul bianco (prima #7E88B3 = 3.5:1) */
  --line:#D6DEF7;
  --surface:#EEF3FF;       /* azzurro chiarissimo — tela delle sezioni */
  --surface-2:#E3ECFF;     /* stacco di tono */
  --accent:#2456F0;        /* blu elettrico — sicuro sul chiaro */
  --accent-from:#22D3EE;   /* ciano — solo su scuro */
  --accent-to:#2456F0;
  --violet:#7C4DFF;
  --gold:#FFC63A;          /* oro: premi, monete, CTA sul fondo scuro */
  --gold-2:#F29E0C;
  --pink:#FF4D8D;
  --wa:#1A2C86;
  --wa-bubble:#DDE7FF;
  --alert:#E0602B;
  /* fondo cosmico delle hero: cambia per tema (community, evento, personaggio) */
  --sky-1:#3B6BFF; --sky-2:#1A2F9E; --sky-3:#0B1150;
  --hero-ink:#FFFFFF; --hero-muted:#C9D5FF; --hero-hl:#FFC63A;
  --pop-shadow:0 .3rem 0 var(--ink);
  /* superficie piena "inchiostro" (pulsante attivo, chip scelto) e il suo testo: si invertono nel tema scuro */
  --solid:#0A1240; --on-solid:#ffffff;
  --on-gold:#0A1240;       /* testo su oro / giallo: uguale nei due temi */
  /* colori del nome (personalizzazioni): su fondo chiaro; dark.css li schiarisce */
  --nc-blue:#2456F0; --nc-green:#12A37F; --nc-purple:#7C4DFF; --nc-pink:#E11D74; --nc-orange:#E0701B;
  /* Telegram (scheda del feed, collegamento dell'account): il blu del marchio */
  --tg:#229ED9; --tg-ink:#1479AE; --tg-soft:#E8F5FC; --on-tg:#FFFFFF;
  /* Sociale Premium: oro, aurora, glitter, tramonto (cornici, colori del nome, stella, scritta) */
  --prm-g1:#FFE58A; --prm-g2:#F2B705; --prm-g3:#B8860B; --prm-g4:#8A5A00; --prm-g5:#FFF6C8;
  --prm-a1:#22D3EE; --prm-a2:#34D399; --prm-a3:#A78BFA; --prm-a4:#F472B6;
  --prm-x1:#FF4D8D; --prm-x2:#FFC83D; --prm-x3:#5EE1FF; --prm-x4:#B794FF;
  --prm-n1:#0EA5E9; --prm-n2:#10B981; --prm-n3:#8B5CF6; --prm-n4:#EC4899;
  --prm-s1:#F97316; --prm-s2:#EF4444; --prm-s3:#DB2777; --prm-s4:#F59E0B;
  --prm-spark:#FFFFFF; --prm-shine:rgba(255,255,255,.75); --prm-glow:rgba(242,183,5,.55); --prm-glow-soft:rgba(242,183,5,.2); --prm-glow-0:rgba(242,183,5,0);
  --prm-a-glow1:rgba(52,211,153,.45); --prm-a-glow2:rgba(167,139,250,.35); --prm-shadow:rgba(184,134,11,.35);
  --prm-txt:#A16C00; --prm-soft:#FFF3C4; --prm-ink:#7A5200;
  /* articoli nei messaggi (components/DocWriter.js): colori del testo (c) ed evidenziatore (h) della tavolozza */
  --doc-c1:#D92D20; --doc-c2:#E8590C; --doc-c3:#B7791F; --doc-c4:#12A37F; --doc-c5:#2456F0; --doc-c6:#7C4DFF; --doc-c7:#D6336C; --doc-c8:#5B6585;
  --doc-h1:#FFF08A; --doc-h2:#C9F2D9; --doc-h3:#CFE0FF; --doc-h4:#F3D4FF; --doc-h5:#FFD6CC; --doc-h6:#E6E9F2;
  /* Premium regalato (scheda /premium nella chat): notte e oro, uguale nei due temi */
  --pgm-bg1:#141B4D; --pgm-bg2:#0A1240; --pgm-ink:#FFFFFF; --pgm-muted:#C9D3FF; --pgm-gold:#FFD86B; --pgm-gold2:#E0A21A; --pgm-gold3:#FFC83D; --pgm-cream:#FFE9A8; --pgm-rose:#F4B8A8;
  --pgm-violet:rgba(185,138,255,.45); --pgm-mint:rgba(52,229,197,.25); --pgm-line:rgba(255,216,107,.55); --pgm-chip:rgba(255,216,107,.12); --pgm-chip-line:rgba(255,216,107,.3);
  --pgm-glass:rgba(255,255,255,.07); --pgm-glass-line:rgba(255,255,255,.1); --pgm-shine:rgba(255,255,255,.14); --pgm-top:rgba(255,255,255,.08);
  --pgm-shadow:rgba(10,18,64,.65); --pgm-glow:rgba(255,216,107,.8); --pgm-glow2:rgba(255,216,107,.45); --pgm-glow3:rgba(255,200,61,.7);
  /* comandi divertenti della chat (components/FunCard.js, lib/funFx.js): schede notte con un tema per comando, uguali nei due temi */
  --fx-bg:#0B1030; --fx-bg2:#151B4A; --fx-ink:#FFFFFF; --fx-muted:rgba(255,255,255,.7); --fx-dim:rgba(255,255,255,.5); --fx-line:rgba(255,255,255,.14);
  --fx-glass:rgba(255,255,255,.08); --fx-glass2:rgba(255,255,255,.14); --fx-shine:rgba(255,255,255,.35); --fx-shadow:0 .9rem 2.2rem rgba(5,8,30,.45), 0 .15rem .4rem rgba(5,8,30,.3);
  --fx-veil:rgba(4,6,24,.72); --fx-veil0:rgba(4,6,24,0);
  --fx-rose-a:#FF4D8D; --fx-rose-b:#A855F7; --fx-rose-glow:rgba(255,77,141,.55);
  --fx-volt-a:#22D3EE; --fx-volt-b:#7C4DFF; --fx-volt-glow:rgba(34,211,238,.5);
  --fx-sun-a:#FFB020; --fx-sun-b:#FF5E3A; --fx-sun-glow:rgba(255,176,32,.5);
  --fx-gold-a:#FFE08A; --fx-gold-b:#F2A007; --fx-gold-glow:rgba(242,183,5,.5);
  --fx-cosmos-a:#8B5CF6; --fx-cosmos-b:#2456F0; --fx-cosmos-glow:rgba(139,92,246,.5);
  --fx-ice-a:#BFE3FF; --fx-ice-b:#4F8BFF; --fx-ice-glow:rgba(122,190,255,.5);
  --fx-mint-a:#34D399; --fx-mint-b:#0EA5E9; --fx-mint-glow:rgba(52,211,153,.5);
  --fx-ball:#05060F; --fx-ball2:#2A2F55; --fx-tri:#1E3AFF; --fx-paper:#FFF7E0; --fx-paper-ink:#5A3A00; --fx-paper-line:#E9C877;
  /* temi e copertine Premium del profilo */
  --prm-th-gold-bg:radial-gradient(55% 40% at 50% 0%, rgba(242,183,5,.28), transparent 70%), radial-gradient(40% 30% at 90% 60%, rgba(255,229,138,.12), transparent 70%), linear-gradient(180deg,#0C0A06 0%,#17130A 55%,#241B06 100%);
  --prm-th-gold-line:#E8B923; --prm-th-gold-shadow:#5C4200; --prm-th-gold-acc:#F2B705; --prm-th-gold-glow:rgba(242,183,5,.22);
  --prm-th-aur-bg:radial-gradient(60% 45% at 20% 0%, rgba(52,211,153,.32), transparent 70%), radial-gradient(50% 40% at 85% 20%, rgba(167,139,250,.3), transparent 70%), linear-gradient(175deg,#041516 0%,#071A33 50%,#160B33 100%);
  --prm-th-aur-line:#5EEAD4; --prm-th-aur-shadow:#020B14; --prm-th-aur-acc:#2DD4BF; --prm-th-aur-glow:rgba(94,234,212,.2);
  --prm-cv-gold:radial-gradient(circle at 20% 40%, rgba(255,229,138,.95) 0 1.5px, transparent 2.5px) 0 0/70px 70px, radial-gradient(circle at 65% 70%, rgba(242,183,5,.9) 0 1px, transparent 2px) 0 0/110px 110px, radial-gradient(50% 80% at 70% 10%, rgba(242,183,5,.5), transparent 70%), linear-gradient(160deg,#120D02 0%,#3D2C03 55%,#8A5A00 100%);
  --prm-cv-north:radial-gradient(60% 90% at 20% 100%, rgba(52,211,153,.7), transparent 70%), radial-gradient(50% 80% at 60% 0%, rgba(34,211,238,.55), transparent 70%), radial-gradient(45% 70% at 95% 60%, rgba(167,139,250,.6), transparent 70%), #061224;
  /* storie: anello (da vedere / viste), sfondo del visualizzatore, sfondi delle storie di testo */
  --st-ring:conic-gradient(#FFC83D,#FF4D8D,#7C4DFF,#2456F0,#FFC83D); --st-ring-seen:#C7CCE0; --st-stage:#05070F; --st-ink:#FFFFFF; --st-dim:rgba(255,255,255,.72); --st-bar:rgba(255,255,255,.35); --st-shade:rgba(0,0,0,.45);
  --stbg-blue:linear-gradient(160deg,#2456F0,#0A1240); --stbg-sunset:linear-gradient(160deg,#FF8A3D,#E11D74); --stbg-mint:linear-gradient(160deg,#12A37F,#0EA5E9);
  --stbg-night:linear-gradient(160deg,#1B1F3B,#3B1F6B); --stbg-gold:linear-gradient(160deg,#F2B705,#8A5A00); --stbg-candy:linear-gradient(160deg,#FF7AB0,#B794FF);
  --stbg-ocean:linear-gradient(160deg,#00C6FB,#005BEA); --stbg-forest:linear-gradient(160deg,#5A8F29,#0B3D2E); --stbg-fire:linear-gradient(160deg,#F9D423,#FF4E50);
  --stbg-grape:linear-gradient(160deg,#8E2DE2,#4A00E0); --stbg-peach:linear-gradient(160deg,#FFD3A5,#FD6585); --stbg-aurora:linear-gradient(160deg,#43E97B,#38F9D7 45%,#7C4DFF);
  --stbg-lava:linear-gradient(160deg,#F83600,#6B0F1A); --stbg-sky:linear-gradient(180deg,#89F7FE,#66A6FF); --stbg-rose:linear-gradient(160deg,#F4C4F3,#FC67FA);
  --stbg-steel:linear-gradient(160deg,#606C88,#3F4C6B); --stbg-lime:linear-gradient(160deg,#D4FC79,#96E6A1); --stbg-cosmos:radial-gradient(circle at 30% 20%,#7C4DFF,transparent 55%),radial-gradient(circle at 80% 80%,#FF4D8D,transparent 50%),#0A0F2C;
  --stbg-neon:linear-gradient(120deg,#FF00E5,#00E5FF,#7C4DFF,#FF4D8D); --stbg-disco:linear-gradient(90deg,#FF3B30,#FF9500,#FFD60A,#34D399,#3D7BFF,#A855F7,#FF3B30);
  --stbg-mascot:url('/assets/reactions/stellar@2x.webp');
  --stbg-black:#111111; --stbg-red:linear-gradient(160deg,#E53935,#B71C1C);
  /* studio delle storie: colori dei testi e degli adesivi (uguali nei due temi, stanno sopra foto e sfondi) */
  --stc-white:#FFFFFF; --stc-black:#111111; --stc-yellow:#FFD60A; --stc-pink:#FF4D8D; --stc-blue:#3D7BFF; --stc-green:#34D399; --stc-red:#FF3B30; --stc-purple:#A855F7; --stc-orange:#FF9500; --stc-cyan:#00E5FF; --stc-empty:#E5E7EB;
  --stc-shadow:0 1px 3px rgba(0,0,0,.55); --stc-drop:0 .3rem 1rem rgba(0,0,0,.4); --stc-dshadow:drop-shadow(0 1px 2px rgba(0,0,0,.45)); --stc-rainbow:linear-gradient(90deg,#FF3B30,#FF9500,#FFD60A,#34D399,#3D7BFF,#A855F7); --stc-neon:0 0 6px rgba(255,255,255,.9), 0 0 18px rgba(255,77,141,.85), 0 0 36px rgba(124,77,255,.7);
  --stc-panel:#1C1E24; --stc-panel-2:#26282F; --stc-line:rgba(255,255,255,.14); --stc-muted:rgba(255,255,255,.62); --stc-accent:#2D88FF; --stc-glass:rgba(17,17,17,.55);
  /* Mew Pop: rarita' mitica, stadi dell'evoluzione (Evo I ciano, Evo II viola, forma finale arcobaleno), Forgia delle Reliquie (fuoco e metallo) */
  --myth-ring:#FF4D8D; --myth-plate:#FCE7F3; --myth-text:#9D174D;
  --evo-1:#22D3EE; --evo-1-glow:rgba(34,211,238,.55); --evo-2:#A855F7; --evo-2-glow:rgba(168,85,247,.6); --evo-3:#FFC63A; --evo-3-glow:rgba(255,198,58,.7);
  --evo-3-ring:conic-gradient(#FFC63A,#FF4D8D,#A855F7,#22D3EE,#34D399,#FFC63A); --evo-ink:#FFFFFF; --evo-badge:#0A1240;
  --frg-bg:radial-gradient(70% 55% at 50% 100%, rgba(249,115,22,.38), transparent 70%), radial-gradient(45% 35% at 50% 8%, rgba(255,198,58,.16), transparent 70%), linear-gradient(180deg,#0B0A12 0%,#160E14 55%,#2A1208 100%);
  --frg-ink:#FFF7ED; --frg-dim:rgba(255,247,237,.72); --frg-line:rgba(255,198,58,.28); --frg-card:rgba(255,255,255,.06); --frg-card-2:rgba(255,255,255,.1);
  --frg-fire:#F97316; --frg-ember:#FFC63A; --frg-hot:#FF4D8D; --frg-steel:#94A3B8; --frg-steel-2:#334155; --frg-anvil:linear-gradient(180deg,#64748B,#1E293B);
  --frg-glow:rgba(249,115,22,.55); --frg-gem-off:rgba(255,255,255,.14); --frg-gem-on:#FFC63A; --frg-shade:rgba(5,4,10,.82); --frg-ok:#34D399; --frg-slot:rgba(255,255,255,.04);
  --radius-pill:9999px;
  --radius-card:2rem;
  --radius-card-sm:1.25rem;
  --radius-control:0.875rem;
  --text-watermark:13rem;
  --container-shell:88rem;
  /* ---- SISTEMA DI DESIGN (regole in frontend/DESIGN.md): usare SOLO queste variabili nei componenti nuovi ---- */
  /* superfici */
  --card:#ffffff; --card-2:#F5F8FF;            /* riquadri e il loro secondo livello (campi, righe in evidenza) */
  --edge:#0A1240;                              /* contorno "cartoon" dei riquadri (nel tema scuro: blu tenue) */
  --action:#0A1240; --on-action:#ffffff;       /* pulsante principale pieno (nel tema scuro diventa oro con testo blu notte) */
  --scrim:rgba(10,18,64,.45);                  /* velo dietro pannelli e finestre */
  /* testo e veli sopra foto / copertine (uguali nei due temi) */
  --on-media:#ffffff; --media-veil:rgba(10,18,64,.8); --media-veil-soft:rgba(10,18,64,.42); --media-line:rgba(255,255,255,.18); --media-chip:rgba(255,255,255,.95);
  /* stati */
  --danger:#C2410C; --danger-soft:#FFF1EB; --danger-line:#E9B39E;
  --success:#15803D; --success-dot:#22C55E; --success-soft:#E8F8EE;
  --warning-ink:#6B4E00; --warning-soft:#FFF4DB; --warning-line:#F5C77E;
  /* gravita' (admin, sicurezza) */
  --sev-info:#94A3B8; --sev-low:#3B82F6; --sev-medium:#F59E0B; --sev-high:#EF4444; --sev-critical:#991B1B; --src-cloudflare:#F38020; --src-csp:#8B5CF6;
  /* spaziatura */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.25rem; --sp-6:1.5rem; --sp-8:2rem; --sp-12:3rem;
  /* raggi (in aggiunta a --radius-pill / -card / -card-sm / -control) */
  --radius-xs:.5rem; --radius-sm:.7rem; --radius-box:1.5rem;
  /* ombre "cartoon" e fluttuanti */
  --shadow-pop:0 .35rem 0 var(--ink); --shadow-pop-sm:0 .15rem 0 var(--ink); --shadow-float:0 18px 40px rgba(10,18,64,.25);
  /* scala degli strati (z-index): nei componenti solo questi, oppure -1..10 per gli strati interni */
  --z-raised:10; --z-sticky:40; --z-tabbar:60; --z-header:120; --z-dropdown:130; --z-banner:150; --z-drawer:180; --z-modal:200; --z-popover:260; --z-toast:950; --z-system:9999;
  /* ---- APP SHELL (components/shell/, DESIGN.md "App shell"): barra blu notte, tela azzurra, card morbide ---- */
  --app-canvas:#EEF2FC;                        /* tela della pagina dietro le colonne */
  --nav-bg:#0B1150; --nav-ink:#ffffff; --nav-muted:#C9D5FF; --nav-hover:rgba(255,255,255,.09); --nav-line:rgba(255,255,255,.14); --nav-active:#6F93FF;
  --card-line:#E1E7F8;                         /* bordo sottile delle card dell'app */
  --card-shadow:0 1px 2px rgba(10,18,64,.05), 0 6px 18px rgba(10,18,64,.06);
  --accent-soft:#E6EDFF; --accent-ink:#1F45C8; /* pulsanti e voci attive azzurre (testo su --accent-soft) */
  --violet-soft:#EFE9FF; --violet-ink:#5B32D6; /* etichetta "Question of the day" */
  --gold-edge:#D99A0B;                         /* bordino sotto i pulsanti gialli */
  --radius-app:1rem;                           /* card dell'app */
  --anav-h:3.9rem;                             /* altezza della barra in alto (desktop) */
  --badge:#E11D48; --on-badge:#ffffff;         /* numeri dei non letti (uguali nei due temi) */
  /* footer blu notte (uguale nei due temi): titoli delle colonne e riga legale, >= 7:1 sul fondo */
  --footer-dim:rgba(255,255,255,.62);
  /* vetrina: la colonna della chat (chat incorporata, la sua risposta breve, la striscia minuti/obiettivo, le regole) */
  --chat-col:61.25rem;
}

:root{
  --stars:
    radial-gradient(1.6px 1.6px at 22px 34px,  #fff 50%, transparent 55%),
    radial-gradient(1.1px 1.1px at 96px 122px, #9BF1FF 50%, transparent 55%),
    radial-gradient(2px 2px at 204px 62px,     #fff 50%, transparent 55%),
    radial-gradient(1.1px 1.1px at 262px 214px,#fff 50%, transparent 55%),
    radial-gradient(1.6px 1.6px at 142px 262px,#FFE27A 50%, transparent 55%),
    radial-gradient(1.1px 1.1px at 302px 296px,#fff 50%, transparent 55%),
    radial-gradient(1.3px 1.3px at 44px 204px, #9BF1FF 50%, transparent 55%),
    radial-gradient(1px 1px at 180px 172px,    #fff 50%, transparent 55%);
}

/* ---------- tema scuro (prima in dark.css) */
:root[data-theme="dark"]{
  --doc-c1:#FF7A70; --doc-c2:#FF9D5C; --doc-c3:#F2C14E; --doc-c4:#4FD6A8; --doc-c5:#7FA6FF; --doc-c6:#B39BFF; --doc-c7:#FF7FAF; --doc-c8:#A9B2CF;
  --doc-h1:rgba(255,224,77,.32); --doc-h2:rgba(52,211,153,.28); --doc-h3:rgba(96,140,255,.32); --doc-h4:rgba(192,132,252,.32); --doc-h5:rgba(255,128,102,.3); --doc-h6:rgba(169,178,207,.25);
  color-scheme:dark;
  --background:#0B1031;
  --foreground:#E6EBFF;
  --ink:#E6EBFF; --ink-2:#DCE3FF; --ink-3:#C9D3FA;
  --text:#E6EBFF;
  --muted:#A9B4DD;
  --subtle:#8C97C6;
  --line:#253067;
  --surface:#0E1539;
  --surface-2:#151E4D;
  --accent:#5A80FF;
  --wa-bubble:#1B2766;
  --blue:#5A80FF;
  /* solo tema scuro */
  --d-card:#131B47; --d-card-2:#19235A;
  /* sistema di design (stessi nomi di sociale.css) */
  --card:#131B47; --card-2:#19235A; --scrim:rgba(2,4,18,.62);
  --edge:#2E3A80; --action:#FFC63A; --on-action:#0A1240;
  --danger:#FFB59A; --danger-soft:#3A1E17; --danger-line:#7A3B26;
  --success:#4ADE80; --success-soft:#0F2A1E;
  --warning-ink:#FFD98A; --warning-soft:#2A2614; --warning-line:#5C4D17;
  --shadow-pop:0 .35rem 0 var(--d-shadow); --shadow-pop-sm:0 .15rem 0 var(--d-shadow); --shadow-float:0 18px 40px rgba(0,0,0,.5);
  --d-edge:#2E3A80; --d-shadow:#03061A;
  --d-text:#E6EBFF;
  --d-solid:#E6EBFF; --d-on-solid:#0A1240;
  --d-inkbg:#1B2766;
  --pop-shadow:0 .3rem 0 var(--d-shadow);
  --solid:#E6EBFF; --on-solid:#0A1240;
  --nc-blue:#7C9BFF; --nc-green:#34D399; --nc-purple:#B49BFF; --nc-pink:#FF7AB0; --nc-orange:#FF9A5C;
  --tg:#2AABEE; --tg-ink:#6CC7F5; --tg-soft:#10293A; --on-tg:#FFFFFF;
  --prm-txt:#F2C94C; --prm-soft:#3A2E0A; --prm-ink:#FFE58A;
  /* app shell (components/shell/) */
  --app-canvas:#0B1031;
  --nav-bg:#070B26; --nav-ink:#E6EBFF; --nav-muted:#A9B4DD; --nav-hover:rgba(255,255,255,.07); --nav-line:rgba(255,255,255,.09); --nav-active:#8FA8FF;
  --card-line:#253067;
  --card-shadow:0 1px 2px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.22);
  --accent-soft:#1C2A6B; --accent-ink:#C2D1FF;
  --violet-soft:#2A1F5C; --violet-ink:#CDBBFF;
  --gold-edge:#B07A00;
}