/* ============================================================ qrv3 — PRESETĂRI DE CULORI (modele ale designului) Se activează cu clasa `.qr-preset-` pe : - preview: ?preset= (ex. ?preset=teal) - ulterior: setat per restaurant din admin Păstrează claymorphism + Fraunces; schimbă DOAR culorile. Versiune „bold": fundal colorat + a doua culoare pe chip-uri/badge-uri, ca diferența de culori să fie evidentă. `!important` fiindcă tema de bază din overrides.css e tot pe :root. ============================================================ */ /* ---- 1) Royal Teal & Warm Coral (?preset=teal) ---- */ :root.qr-preset-teal { --background: #CDE4E6 !important; /* teal deschis (fundal colorat) */ --foreground: #063842 !important; /* teal închis (text) */ --card: #FBFDFD !important; /* card aproape alb, iese pe teal */ --card-foreground: #063842 !important; --popover: #FBFDFD !important; --popover-foreground: #063842 !important; --primary: #005F73 !important; /* Royal Teal — butoane principale */ --primary-foreground: #F2FBFB !important; --secondary: #E97C58 !important; /* Warm Coral — buton secundar */ --secondary-foreground: #06323B !important; --muted: #F7D8CA !important; /* coral deschis — chip-uri/badge-uri */ --muted-foreground: #5C6E71 !important; --accent: #F7D8CA !important; --accent-foreground: #B0492B !important; /* iconițele devin coral închis */ --destructive: #C0392B !important; --destructive-foreground: #F2FBFB !important; --border: rgba(0, 60, 74, .18) !important; --input: transparent !important; --input-background: #E1EFF0 !important; --switch-background: #B7D2D4 !important; --ring: #005F73 !important; --sidebar: #FBFDFD !important; --sidebar-foreground: #063842 !important; --sidebar-primary: #005F73 !important; --sidebar-primary-foreground: #F2FBFB !important; --sidebar-accent: #F7D8CA !important; --sidebar-accent-foreground: #B0492B !important; --sidebar-border: rgba(0, 60, 74, .18) !important; --sidebar-ring: #005F73 !important; } .dark.qr-preset-teal { --background: #052E37 !important; --foreground: #F0EAE4 !important; --card: #0A4E5C !important; /* Royal Teal — card colorat */ --card-foreground: #F5EFE9 !important; --popover: #0A4E5C !important; --popover-foreground: #F5EFE9 !important; --primary: #F0906C !important; /* Warm Coral — butoane pe închis */ --primary-foreground: #052E37 !important; --secondary: #0F6274 !important; --secondary-foreground: #F0EAE4 !important; --muted: #0F4652 !important; --muted-foreground: #AEC7CB !important; --accent: #12505E !important; --accent-foreground: #F0EAE4 !important; --destructive: #E2725B !important; --destructive-foreground: #052E37 !important; --border: rgba(240, 234, 228, .15) !important; --input: rgba(240, 234, 228, .12) !important; --input-background: #0A3B45 !important; --switch-background: #1B6273 !important; --ring: #F0906C !important; --sidebar: #0A4E5C !important; --sidebar-foreground: #F0EAE4 !important; --sidebar-primary: #F0906C !important; --sidebar-primary-foreground: #052E37 !important; --sidebar-accent: #12505E !important; --sidebar-accent-foreground: #F0EAE4 !important; --sidebar-border: rgba(240, 234, 228, .15) !important; --sidebar-ring: #F0906C !important; } :root.qr-preset-teal #root .bg-card { box-shadow: 0 30px 55px -20px rgba(0, 60, 74, .34), inset 0 12px 24px rgba(255, 255, 255, .72), inset 0 -18px 32px rgba(0, 60, 74, .12) !important; } :root.qr-preset-teal #root .bg-primary { box-shadow: 0 22px 38px -10px rgba(0, 60, 74, .55), inset 0 9px 18px rgba(255, 255, 255, .22), inset 0 -14px 24px rgba(0, 0, 0, .3) !important; } /* ---- 2) Persian Green & Sandy Orange (?preset=mint) ---- */ :root.qr-preset-mint { --background: #CFE7DF !important; /* verde deschis (fundal colorat) */ --foreground: #1E4139 !important; --card: #FBFDFC !important; --card-foreground: #1E4139 !important; --popover: #FBFDFC !important; --popover-foreground: #1E4139 !important; --primary: #2A9D8F !important; /* Persian Green — butoane principale */ --primary-foreground: #FBFEFD !important; --secondary: #F4A261 !important; /* Sandy Orange — buton secundar */ --secondary-foreground: #1E4139 !important; --muted: #FBE1C9 !important; /* portocaliu deschis — chip-uri/badge-uri */ --muted-foreground: #5E6A5F !important; --accent: #FBE1C9 !important; --accent-foreground: #BF6A20 !important; /* iconițele devin portocaliu închis */ --destructive: #C0392B !important; --destructive-foreground: #FBFEFD !important; --border: rgba(30, 65, 57, .18) !important; --input: transparent !important; --input-background: #E1EFE9 !important; --switch-background: #B4D4CB !important; --ring: #2A9D8F !important; --sidebar: #FBFDFC !important; --sidebar-foreground: #1E4139 !important; --sidebar-primary: #2A9D8F !important; --sidebar-primary-foreground: #FBFEFD !important; --sidebar-accent: #FBE1C9 !important; --sidebar-accent-foreground: #BF6A20 !important; --sidebar-border: rgba(30, 65, 57, .18) !important; --sidebar-ring: #2A9D8F !important; } .dark.qr-preset-mint { --background: #12302A !important; --foreground: #F1EAE0 !important; --card: #1C6459 !important; /* Persian Green — card colorat */ --card-foreground: #F5EFE6 !important; --popover: #1C6459 !important; --popover-foreground: #F5EFE6 !important; --primary: #F4A261 !important; /* Sandy Orange — butoane pe închis */ --primary-foreground: #12302A !important; --secondary: #2A9D8F !important; --secondary-foreground: #F1EAE0 !important; --muted: #1B4B43 !important; --muted-foreground: #A9C4BD !important; --accent: #1E534A !important; --accent-foreground: #F1EAE0 !important; --destructive: #E2725B !important; --destructive-foreground: #12302A !important; --border: rgba(241, 234, 224, .15) !important; --input: rgba(241, 234, 224, .12) !important; --input-background: #173F39 !important; --switch-background: #2C7466 !important; --ring: #F4A261 !important; --sidebar: #1C6459 !important; --sidebar-foreground: #F1EAE0 !important; --sidebar-primary: #F4A261 !important; --sidebar-primary-foreground: #12302A !important; --sidebar-accent: #1E534A !important; --sidebar-accent-foreground: #F1EAE0 !important; --sidebar-border: rgba(241, 234, 224, .15) !important; --sidebar-ring: #F4A261 !important; } :root.qr-preset-mint #root .bg-card { box-shadow: 0 30px 55px -20px rgba(24, 74, 66, .32), inset 0 12px 24px rgba(255, 255, 255, .72), inset 0 -18px 32px rgba(24, 74, 66, .11) !important; } :root.qr-preset-mint #root .bg-primary { box-shadow: 0 22px 38px -10px rgba(24, 74, 66, .5), inset 0 9px 18px rgba(255, 255, 255, .24), inset 0 -14px 24px rgba(0, 0, 0, .28) !important; } /* ---- 3) Bubblegum (?preset=bubblegum) — roz; plum doar ca a 2-a culoare ---- */ :root.qr-preset-bubblegum { --background: #FCE0EE !important; /* bubblegum blush (fundal colorat) */ --foreground: #3A1F2B !important; /* prună închis (text) */ --card: #FDF6F9 !important; --card-foreground: #3A1F2B !important; --popover: #FDF6F9 !important; --popover-foreground: #3A1F2B !important; --primary: #E8479A !important; /* Roz — butoane principale */ --primary-foreground: #FFF4F8 !important; --secondary: #3A1F2B !important; /* Prună închis — buton secundar */ --secondary-foreground: #F6E7EE !important; --muted: #FBD3E6 !important; /* roz deschis — chip-uri/badge-uri */ --muted-foreground: #7A5A66 !important; --accent: #FBD3E6 !important; --accent-foreground: #C42877 !important; /* iconițele devin roz închis */ --destructive: #C0392B !important; --destructive-foreground: #FFF4F8 !important; --border: rgba(58, 31, 43, .16) !important; --input: transparent !important; --input-background: #F3DCE7 !important; --switch-background: #E2BCCF !important; --ring: #E8479A !important; --sidebar: #FDF6F9 !important; --sidebar-foreground: #3A1F2B !important; --sidebar-primary: #E8479A !important; --sidebar-primary-foreground: #FFF4F8 !important; --sidebar-accent: #FBD3E6 !important; --sidebar-accent-foreground: #C42877 !important; --sidebar-border: rgba(58, 31, 43, .16) !important; --sidebar-ring: #E8479A !important; } .dark.qr-preset-bubblegum { --background: #1E0F16 !important; --foreground: #F5E4EC !important; --card: #3A2029 !important; /* prună — card colorat */ --card-foreground: #F7E9F0 !important; --popover: #3A2029 !important; --popover-foreground: #F7E9F0 !important; --primary: #FF8FC4 !important; /* roz luminat — butoane pe închis */ --primary-foreground: #1E0F16 !important; --secondary: #7A3350 !important; --secondary-foreground: #F5E4EC !important; --muted: #2E1C24 !important; --muted-foreground: #C9A9B7 !important; --accent: #38222C !important; --accent-foreground: #F5E4EC !important; --destructive: #E2725B !important; --destructive-foreground: #1E0F16 !important; --border: rgba(245, 228, 236, .15) !important; --input: rgba(245, 228, 236, .12) !important; --input-background: #291721 !important; --switch-background: #573B47 !important; --ring: #FF8FC4 !important; --sidebar: #3A2029 !important; --sidebar-foreground: #F5E4EC !important; --sidebar-primary: #FF8FC4 !important; --sidebar-primary-foreground: #1E0F16 !important; --sidebar-accent: #38222C !important; --sidebar-accent-foreground: #F5E4EC !important; --sidebar-border: rgba(245, 228, 236, .15) !important; --sidebar-ring: #FF8FC4 !important; } :root.qr-preset-bubblegum #root .bg-card { box-shadow: 0 30px 55px -20px rgba(74, 24, 45, .30), inset 0 12px 24px rgba(255, 255, 255, .72), inset 0 -18px 32px rgba(74, 24, 45, .10) !important; } :root.qr-preset-bubblegum #root .bg-primary { box-shadow: 0 22px 38px -10px rgba(120, 30, 70, .5), inset 0 9px 18px rgba(255, 255, 255, .22), inset 0 -14px 24px rgba(0, 0, 0, .28) !important; } /* ---- 4) Clasic — Alb & Negru (?preset=clasic) ---- Pur monocrom, FĂRĂ accent de culoare: butoane negre pe alb, griuri neutre pe chip-uri/iconițe. Claymorphism păstrat. */ :root.qr-preset-clasic { --background: #FFFFFF !important; /* alb pur (fundal) */ --foreground: #18181B !important; /* negru neutru (text) */ --card: #FFFFFF !important; /* card alb pur — se separă prin umbra claymorphism */ --card-foreground: #18181B !important; --popover: #FFFFFF !important; --popover-foreground: #18181B !important; --primary: #18181B !important; /* Negru — butoane principale */ --primary-foreground: #FFFFFF !important; --secondary: #26262B !important; /* gri închis — buton secundar */ --secondary-foreground: #FAFAFA !important; --muted: #F2F2F3 !important; /* gri deschis — chip-uri/badge-uri */ --muted-foreground: #5A5A5F !important; --accent: #F2F2F3 !important; --accent-foreground: #18181B !important; /* iconițele devin negre */ --destructive: #B23A2E !important; --destructive-foreground: #FFFFFF !important; --border: rgba(24, 24, 27, .12) !important; --input: transparent !important; --input-background: #F5F5F6 !important; --switch-background: #D6D6D9 !important; --ring: #18181B !important; --sidebar: #FFFFFF !important; --sidebar-foreground: #18181B !important; --sidebar-primary: #18181B !important; --sidebar-primary-foreground: #FFFFFF !important; --sidebar-accent: #F2F2F3 !important; --sidebar-accent-foreground: #18181B !important; --sidebar-border: rgba(24, 24, 27, .12) !important; --sidebar-ring: #18181B !important; } .dark.qr-preset-clasic { --background: #0E0E0F !important; --foreground: #F4F4F5 !important; --card: #1A1A1C !important; --card-foreground: #F4F4F5 !important; --popover: #1A1A1C !important; --popover-foreground: #F4F4F5 !important; --primary: #FAFAFA !important; /* alb — butoane pe închis */ --primary-foreground: #18181B !important; --secondary: #2A2A2E !important; --secondary-foreground: #F4F4F5 !important; --muted: #242427 !important; --muted-foreground: #A1A1A6 !important; --accent: #26262A !important; --accent-foreground: #F4F4F5 !important; --destructive: #D0574A !important; --destructive-foreground: #18181B !important; --border: rgba(244, 244, 245, .14) !important; --input: rgba(244, 244, 245, .10) !important; --input-background: #1C1C1F !important; --switch-background: #3A3A3F !important; --ring: #FAFAFA !important; --sidebar: #1A1A1C !important; --sidebar-foreground: #F4F4F5 !important; --sidebar-primary: #FAFAFA !important; --sidebar-primary-foreground: #18181B !important; --sidebar-accent: #26262A !important; --sidebar-accent-foreground: #F4F4F5 !important; --sidebar-border: rgba(244, 244, 245, .14) !important; --sidebar-ring: #FAFAFA !important; } :root.qr-preset-clasic #root .bg-card { box-shadow: 0 30px 55px -20px rgba(0, 0, 0, .14), inset 0 12px 24px rgba(255, 255, 255, .90), inset 0 -18px 32px rgba(0, 0, 0, .05) !important; } :root.qr-preset-clasic #root .bg-primary { box-shadow: 0 22px 38px -10px rgba(0, 0, 0, .45), inset 0 9px 18px rgba(255, 255, 255, .14), inset 0 -14px 24px rgba(0, 0, 0, .30) !important; } /* ---- 5) Dark (?preset=dark) — negru + accent auriu ---- Monocrom pe negru + accent auriu. Butonul de dark mode e ascuns, deci `:root.qr-preset-dark` e ce se vede mereu → e proiectat direct pe întuneric. `.dark` clonează valorile pentru siguranță. */ :root.qr-preset-dark, .dark.qr-preset-dark { --background: #0E0E0F !important; /* aproape negru (fundal) */ --foreground: #F1EFE9 !important; /* aproape alb (text) */ --card: #1A1A1C !important; /* grafit — cardul iese pe negru */ --card-foreground: #F3F1EB !important; --popover: #1A1A1C !important; --popover-foreground: #F3F1EB !important; --primary: #D8AE52 !important; /* Auriu antic — butoane principale */ --primary-foreground: #14130E !important; --secondary: #262629 !important; /* grafit deschis — buton secundar */ --secondary-foreground: #F1EFE9 !important; --muted: #202023 !important; /* chip-uri/badge-uri */ --muted-foreground: #A9A69C !important; --accent: #24231D !important; --accent-foreground: #E7C877 !important; /* iconițele devin auriu */ --destructive: #D0574A !important; --destructive-foreground: #14130E !important; --border: rgba(241, 239, 233, .13) !important; --input: rgba(241, 239, 233, .10) !important; --input-background: #1C1C1F !important; --switch-background: #35353A !important; --ring: #D8AE52 !important; --sidebar: #1A1A1C !important; --sidebar-foreground: #F1EFE9 !important; --sidebar-primary: #D8AE52 !important; --sidebar-primary-foreground: #14130E !important; --sidebar-accent: #24231D !important; --sidebar-accent-foreground: #E7C877 !important; --sidebar-border: rgba(241, 239, 233, .13) !important; --sidebar-ring: #D8AE52 !important; } :root.qr-preset-dark #root .bg-card, .dark.qr-preset-dark #root .bg-card { box-shadow: 0 30px 55px -22px rgba(0, 0, 0, .72), inset 0 12px 24px rgba(255, 255, 255, .05), inset 0 -18px 32px rgba(0, 0, 0, .50) !important; } :root.qr-preset-dark #root .bg-primary, .dark.qr-preset-dark #root .bg-primary { box-shadow: 0 22px 38px -10px rgba(0, 0, 0, .70), inset 0 9px 18px rgba(255, 255, 255, .22), inset 0 -14px 24px rgba(0, 0, 0, .40) !important; }