/* Picky-T themes: 9 styles x light/dark. Each style has TWO blocks: [data-theme="x"] shape tokens (fonts, borders, radius, shadow shape, pattern) + light colours [data-theme="x"][data-mode="dark"] dark colours only Shape tokens refer to colour tokens with var(), so one shape serves both modes. data-theme/data-mode are on , or on a preview tile. Tone meaning: t0 = low score, t1 = good, t2 = top, t3 = ok, t4 = extra. */ /* ==================================================================== 1. STICKER BOOK - chunky ink outlines, hard shadows, dotted album page ==================================================================== */ :root, [data-theme="sticker"] { --page-pattern: radial-gradient(var(--pattern-a) 1.6px, transparent 1.7px); --page-pattern-size: 22px 22px; --line: 3px; --line-thin: 2px; --shadow: 4px 4px 0 var(--shadow-color); --shadow-lg: 6px 6px 0 var(--shadow-color); --shadow-press: 1px 1px 0 var(--shadow-color); --press: 3px; --r-card: 20px; --r-field: 12px; --r-pill: 999px; --r-small: 16px; --font-display: "Bagel Fat One", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif; --font-body: "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --display-weight: 400; --display-spacing: 0.3px; --display-transform: none; --logo-stroke: 2px var(--logo-stroke-color); --logo-shadow: 3px 3px 0 var(--logo-shadow-color); --logo-rotate: -4deg; --sticker-ring: 0 0 0 4px var(--die-cut), 0 0 0 7px var(--line-color), 4px 5px 0 7px var(--shadow-color); --sticker-rotate: 6deg; --sticker-radius: 50%; --chip-ring: 0 0 0 3px var(--die-cut), 0 0 0 5px var(--line-color); --chip-margin: 5px; --gloss: none; --scheme: light; --page: #EDEAFF; --pattern-a: #CFC8F5; --paper: #FFFFFF; --ink: #241A4A; --ink-soft: #5A4F80; --placeholder: #8F87B0; --line-color: #241A4A; --shadow-color: #241A4A; --primary: #FF5C8A; --on-primary: #241A4A; --highlight: #FFC93C; --on-highlight: #241A4A; --focus: #4CB8F5; --star: #FFC93C; --star-empty: #E6E1FF; --star-stroke: #241A4A; --t0: #FF5C8A; --t1: #FFC93C; --t2: #2FD09A; --t3: #4CB8F5; --t4: #B69CFF; --on-accent: #241A4A; --field-bg: #FFFFFF; --muted-bg: #F1EEFF; --suggest-bg: #FFF6D6; --suggest-line: #E9D9A6; --code-bg: #FFF3CC; --danger: #D62A4F; --success: #138A5E; --logo-color: #FF5C8A; --logo-stroke-color: #241A4A; --logo-shadow-color: #241A4A; --die-cut: #FFFFFF; --doodle-opacity: 1; } [data-theme="sticker"][data-mode="dark"] { --scheme: dark; --page: #17132E; --pattern-a: #2C2558; --paper: #2A2355; --ink: #F3F0FF; --ink-soft: #B7AEDB; --placeholder: #8A82B5; --line-color: #C9C0FF; --shadow-color: #07050F; --primary: #FF5C8A; --on-primary: #1A1236; --highlight: #FFC93C; --on-highlight: #1A1236; --focus: #4CB8F5; --star: #FFC93C; --star-empty: #3F3778; --star-stroke: #B98A00; --t0: #FF6F97; --t1: #FFC93C; --t2: #2FD09A; --t3: #4CB8F5; --t4: #B69CFF; --on-accent: #1A1236; --field-bg: #1F1A42; --muted-bg: #352D66; --suggest-bg: #332B63; --suggest-line: #4A4185; --code-bg: #332B63; --danger: #FF7A99; --success: #4DE3AE; --logo-color: #FF5C8A; --logo-stroke-color: #07050F; --logo-shadow-color: #07050F; --die-cut: #F3F0FF; --doodle-opacity: 0.85; } /* ==================================================================== 2. ARCADE - neon outlines with glow (dark), daytime neon (light) ==================================================================== */ [data-theme="neon"] { --page-pattern: radial-gradient(var(--pattern-a) 1.4px, transparent 1.5px); --page-pattern-size: 20px 20px; --line: 2px; --line-thin: 2px; --shadow: 0 0 10px var(--glow); --shadow-lg: 0 0 18px var(--glow); --shadow-press: 0 0 4px var(--glow); --press: 1px; --r-card: 14px; --r-field: 10px; --r-pill: 10px; --r-small: 12px; --font-display: "Bungee", "Impact", sans-serif; --font-body: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --display-weight: 400; --display-spacing: 0.5px; --display-transform: none; --logo-stroke: 0 transparent; --logo-shadow: 0 0 8px var(--logo-shadow-color), 0 0 22px var(--logo-shadow-color); --logo-rotate: 0deg; --sticker-ring: 0 0 0 3px var(--paper), 0 0 0 5px var(--line-color), 0 0 18px var(--glow); --sticker-rotate: 0deg; --sticker-radius: 50%; --chip-ring: 0 0 10px var(--chip-glow); --chip-margin: 2px; --gloss: none; --scheme: light; --page: #F6F4FF; --pattern-a: #DED7FF; --paper: #FFFFFF; --ink: #1B1640; --ink-soft: #57508A; --placeholder: #938DBA; --line-color: #00AFC0; --glow: rgba(0, 175, 192, 0.35); --chip-glow: rgba(209, 20, 159, 0.25); --primary: #D1149F; --on-primary: #FFFFFF; --highlight: #00C2D4; --on-highlight: #0B1030; --focus: #F5B400; --star: #F5B400; --star-empty: #E8E4FF; --star-stroke: #1B1640; --t0: #FF7AB8; --t1: #FFD84A; --t2: #3DDC97; --t3: #45D6F0; --t4: #B99AFF; --on-accent: #1B1640; --field-bg: #FFFFFF; --muted-bg: #EEEBFF; --suggest-bg: #F4F1FF; --suggest-line: #DDD6FF; --code-bg: #F4F1FF; --danger: #C2185B; --success: #0E8A5F; --logo-color: #D1149F; --logo-stroke-color: transparent; --logo-shadow-color: rgba(209, 20, 159, 0.35); --die-cut: #FFFFFF; --doodle-opacity: 0.6; } [data-theme="neon"][data-mode="dark"] { --scheme: dark; --page: #120F2A; --pattern-a: #2C2566; --paper: #1C1840; --ink: #F2EEFF; --ink-soft: #B3AAD9; --placeholder: #7F77AD; --line-color: #3DF5FF; --glow: rgba(61, 245, 255, 0.4); --chip-glow: rgba(255, 79, 216, 0.35); --primary: #FF4FD8; --on-primary: #120F2A; --highlight: #3DF5FF; --on-highlight: #120F2A; --focus: #FFE45C; --star: #FFE45C; --star-empty: #1C1840; --star-stroke: #FFE45C; --t0: #FF6FA8; --t1: #FFE45C; --t2: #4DFFB0; --t3: #3DF5FF; --t4: #B18CFF; --on-accent: #120F2A; --field-bg: #120F2A; --muted-bg: #2A2455; --suggest-bg: #241F4D; --suggest-line: #3A3470; --code-bg: #241F4D; --danger: #FF7A96; --success: #4DFFB0; --logo-color: #FF4FD8; --logo-shadow-color: rgba(255, 79, 216, 0.7); --die-cut: #1C1840; --doodle-opacity: 0.55; } /* ==================================================================== 3. NOTEBOOK - ruled paper (light), chalkboard (dark) ==================================================================== */ [data-theme="notebook"] { --page-pattern: linear-gradient(90deg, transparent 38px, var(--pattern-b) 38px, var(--pattern-b) 40px, transparent 40px), repeating-linear-gradient(transparent 0 27px, var(--pattern-a) 27px 28px); --page-pattern-size: auto; --line: 2px; --line-thin: 2px; --shadow: 3px 3px 0 var(--shadow-color); --shadow-lg: 5px 5px 0 var(--shadow-color); --shadow-press: 1px 1px 0 var(--shadow-color); --press: 2px; --r-card: 4px; --r-field: 4px; --r-pill: 6px; --r-small: 4px; --font-display: "Permanent Marker", "Comic Sans MS", cursive; --font-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --display-weight: 400; --display-spacing: 0.5px; --display-transform: none; --logo-stroke: 0 transparent; --logo-shadow: none; --logo-rotate: -3deg; --sticker-ring: none; --sticker-rotate: 4deg; --sticker-radius: 50%; --chip-ring: none; --chip-margin: 2px; --gloss: none; --scheme: light; --page: #FBFCFF; --pattern-a: #C9D8F2; --pattern-b: #F2A7A7; --paper: #FFFFFF; --ink: #1F2A44; --ink-soft: #56637F; --placeholder: #8A93A8; --line-color: #1F2A44; --shadow-color: #C9D8F2; --primary: #FFE45E; --on-primary: #1F2A44; --highlight: #FFE45E; --on-highlight: #1F2A44; --focus: #2350C8; --star: #F2B705; --star-empty: #E4E9F4; --star-stroke: #1F2A44; --t0: #FFB3C7; --t1: #FFE45E; --t2: #9BF2B5; --t3: #A8D8FF; --t4: #FFC98A; --on-accent: #1F2A44; --field-bg: #FFFFFF; --muted-bg: #EEF3FC; --suggest-bg: #FFFBE0; --suggest-line: #E8DFA0; --code-bg: #FFFBE0; --danger: #C62828; --success: #1B7F4B; --logo-color: #2350C8; --die-cut: #FFFFFF; --doodle-opacity: 0.8; } [data-theme="notebook"][data-mode="dark"] { --scheme: dark; --page: #1F3A33; --pattern-a: rgba(255, 255, 255, 0.07); --pattern-b: rgba(255, 170, 170, 0.28); --paper: #26443C; --ink: #F1F5EE; --ink-soft: #B8C7BD; --placeholder: #7F978B; --line-color: #E8EFE6; --shadow-color: rgba(0, 0, 0, 0.35); --primary: #FFE66D; --on-primary: #1F3A33; --highlight: #FFE66D; --on-highlight: #1F3A33; --focus: #9ED4FF; --star: #FFE66D; --star-empty: #34574D; --star-stroke: #E8EFE6; --t0: #FF9FB2; --t1: #FFE66D; --t2: #A6F0B5; --t3: #9ED4FF; --t4: #FFC48A; --on-accent: #1F3A33; --field-bg: #1F3A33; --muted-bg: #31524A; --suggest-bg: #2C4C44; --suggest-line: #3F6258; --code-bg: #2C4C44; --danger: #FF9A9A; --success: #A6F0B5; --logo-color: #9ED4FF; --die-cut: #26443C; --doodle-opacity: 0.5; } /* ==================================================================== 4. CLEAN - quiet, thin borders, no decoration ==================================================================== */ [data-theme="clean"] { --page-pattern: none; --page-pattern-size: auto; --line: 1px; --line-thin: 1px; --shadow: none; --shadow-lg: none; --shadow-press: none; --press: 0px; --r-card: 14px; --r-field: 10px; --r-pill: 999px; --r-small: 12px; --font-display: "DM Serif Display", Georgia, serif; --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --display-weight: 400; --display-spacing: 0; --display-transform: none; --logo-stroke: 0 transparent; --logo-shadow: none; --logo-rotate: 0deg; --sticker-ring: none; --sticker-rotate: 0deg; --sticker-radius: 50%; --chip-ring: none; --chip-margin: 2px; --gloss: none; --scheme: light; --page: #F3F4F6; --paper: #FFFFFF; --ink: #1A1D23; --ink-soft: #5B6270; --placeholder: #9AA1AD; --line-color: #D5D9E0; --primary: #0F766E; --on-primary: #FFFFFF; --highlight: #E3F3F1; --on-highlight: #0B5E58; --focus: #5EC4B8; --star: #E8A317; --star-empty: #E5E7EB; --star-stroke: #B7791F; --t0: #FBD5DA; --t1: #FDEBB6; --t2: #C8F0DC; --t3: #D4E6FB; --t4: #E6E0FA; --on-accent: #1A1D23; --field-bg: #FFFFFF; --muted-bg: #F3F4F6; --suggest-bg: #FFFFFF; --suggest-line: #EEF0F3; --code-bg: #F0FDFA; --danger: #B42318; --success: #067647; --logo-color: #0F766E; --die-cut: #FFFFFF; --doodle-opacity: 0.35; } [data-theme="clean"][data-mode="dark"] { --scheme: dark; --page: #0F1115; --paper: #171A20; --ink: #E7E9EE; --ink-soft: #9AA1AD; --placeholder: #6B7280; --line-color: #2C313B; --primary: #2DD4BF; --on-primary: #062B27; --highlight: #133B37; --on-highlight: #8EEBDD; --focus: #2DD4BF; --star: #F5B942; --star-empty: #2C313B; --star-stroke: #C98E1F; --t0: #5A2A35; --t1: #574619; --t2: #1D4D38; --t3: #22416A; --t4: #3A315F; --on-accent: #F1F3F6; --field-bg: #12151A; --muted-bg: #1F232B; --suggest-bg: #171A20; --suggest-line: #252A33; --code-bg: #0F2A27; --danger: #F97066; --success: #47CD89; --logo-color: #2DD4BF; --die-cut: #171A20; --doodle-opacity: 0.25; } /* ==================================================================== 5. SEVENTIES - stripes, burnt orange, groovy double shadow ==================================================================== */ [data-theme="seventies"] { --page-pattern: repeating-linear-gradient(135deg, var(--pattern-a) 0 18px, var(--pattern-b) 18px 36px); --page-pattern-size: auto; --line: 3px; --line-thin: 2px; --shadow: 4px 4px 0 var(--shadow-color); --shadow-lg: 3px 3px 0 var(--shadow-color-2), 7px 7px 0 var(--shadow-color); --shadow-press: 1px 1px 0 var(--shadow-color); --press: 3px; --r-card: 26px; --r-field: 14px; --r-pill: 999px; --r-small: 18px; --font-display: "Shrikhand", "Cooper Black", Georgia, serif; --font-body: "Karla", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --display-weight: 400; --display-spacing: 0.3px; --display-transform: none; --logo-stroke: 2px var(--logo-stroke-color); --logo-shadow: 2px 2px 0 var(--shadow-color-2), 4px 4px 0 var(--logo-shadow-color); --logo-rotate: -3deg; --sticker-ring: 0 0 0 4px var(--die-cut), 0 0 0 7px var(--line-color), 5px 5px 0 7px var(--shadow-color-2); --sticker-rotate: 5deg; --sticker-radius: 50%; --chip-ring: 0 0 0 3px var(--die-cut), 0 0 0 5px var(--line-color); --chip-margin: 5px; --gloss: none; --scheme: light; --page: #F6E3B4; --pattern-a: #F6E3B4; --pattern-b: #F1D99E; --paper: #FFF4DC; --ink: #3B2314; --ink-soft: #7A5A43; --placeholder: #A88B6E; --line-color: #3B2314; --shadow-color: #3B2314; --shadow-color-2: #F3A712; --primary: #E4572E; --on-primary: #2A170C; --highlight: #F3A712; --on-highlight: #3B2314; --focus: #5FB7B1; --star: #F3A712; --star-empty: #EAD2A0; --star-stroke: #3B2314; --t0: #E97C62; --t1: #F3A712; --t2: #8DBB5E; --t3: #5FB7B1; --t4: #D49AA0; --on-accent: #3B2314; --field-bg: #FFFBF0; --muted-bg: #F6E3B4; --suggest-bg: #FCEBC2; --suggest-line: #E8C98A; --code-bg: #FCEBC2; --danger: #B3261E; --success: #4A7A2A; --logo-color: #E4572E; --logo-stroke-color: #3B2314; --logo-shadow-color: #3B2314; --die-cut: #FFF4DC; --doodle-opacity: 1; } [data-theme="seventies"][data-mode="dark"] { --scheme: dark; --page: #2A1B12; --pattern-a: #2A1B12; --pattern-b: #332217; --paper: #3A2618; --ink: #FCEBD0; --ink-soft: #D2B48F; --placeholder: #9C7D5E; --line-color: #E8B04A; --shadow-color: #120A05; --shadow-color-2: #E4572E; --primary: #F07345; --on-primary: #2A170C; --highlight: #F3A712; --on-highlight: #2A1B12; --focus: #5FB7B1; --star: #F3A712; --star-empty: #4D3322; --star-stroke: #9C6A05; --t0: #E97C62; --t1: #F3A712; --t2: #8DBB5E; --t3: #5FB7B1; --t4: #D49AA0; --on-accent: #2A170C; --field-bg: #2F1F14; --muted-bg: #4A3120; --suggest-bg: #4A3120; --suggest-line: #5E4029; --code-bg: #4A3120; --danger: #FF8A80; --success: #A8D08D; --logo-color: #F07345; --logo-stroke-color: #120A05; --logo-shadow-color: #120A05; --die-cut: #FCEBD0; --doodle-opacity: 0.85; } /* ==================================================================== 6. BLUEPRINT - drafting paper (light), blueprint grid (dark) ==================================================================== */ [data-theme="blueprint"] { --page-pattern: linear-gradient(var(--pattern-a) 1px, transparent 1px), linear-gradient(90deg, var(--pattern-a) 1px, transparent 1px); --page-pattern-size: 24px 24px; --line: 2px; --line-thin: 1px; --shadow: none; --shadow-lg: none; --shadow-press: none; --press: 1px; --r-card: 6px; --r-field: 4px; --r-pill: 4px; --r-small: 4px; --font-display: "Space Mono", ui-monospace, Menlo, Consolas, monospace; --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --display-weight: 700; --display-spacing: -0.5px; --display-transform: none; --logo-stroke: 0 transparent; --logo-shadow: 2px 2px 0 var(--logo-shadow-color); --logo-rotate: 0deg; --sticker-ring: 0 0 0 4px var(--die-cut), 0 0 0 5px var(--line-color); --sticker-rotate: 0deg; --sticker-radius: 50%; --chip-ring: none; --chip-margin: 2px; --gloss: none; --scheme: light; --page: #F4F8FD; --pattern-a: rgba(27, 77, 137, 0.12); --paper: #FFFFFF; --ink: #0E2F57; --ink-soft: #4A6A93; --placeholder: #8BA3C2; --line-color: #1B4D89; --primary: #1B4D89; --on-primary: #FFFFFF; --highlight: #FFD84D; --on-highlight: #0E2F57; --focus: #F2B705; --star: #F2B705; --star-empty: #DCE7F5; --star-stroke: #0E2F57; --t0: #FFB4A3; --t1: #FFD84D; --t2: #8FE3C9; --t3: #A9CCFF; --t4: #D7C2FF; --on-accent: #0E2F57; --field-bg: #FFFFFF; --muted-bg: #E6EEF8; --suggest-bg: #F4F8FD; --suggest-line: #D3E0F0; --code-bg: #F4F8FD; --danger: #B3261E; --success: #1B7F4B; --logo-color: #1B4D89; --logo-shadow-color: #FFD84D; --die-cut: #FFFFFF; --doodle-opacity: 0.3; } [data-theme="blueprint"][data-mode="dark"] { --scheme: dark; --page: #1B4D89; --pattern-a: rgba(255, 255, 255, 0.11); --paper: #1F5A9E; --ink: #F4F8FF; --ink-soft: #C3D6F0; --placeholder: #8FB0D9; --line-color: #EAF2FF; --primary: #FFD84D; --on-primary: #0E2F57; --highlight: #FFD84D; --on-highlight: #0E2F57; --focus: #FFD84D; --star: #FFD84D; --star-empty: #1F5A9E; --star-stroke: #EAF2FF; --t0: #FF9F8A; --t1: #FFD84D; --t2: #7FE3C4; --t3: #9CC8FF; --t4: #D5B8FF; --on-accent: #0E2F57; --field-bg: #174683; --muted-bg: #2A66AD; --suggest-bg: #174683; --suggest-line: #3E73B5; --code-bg: #174683; --danger: #FFB4A8; --success: #9FF0C9; --logo-color: #F4F8FF; --logo-shadow-color: #0E2F57; --die-cut: #1F5A9E; --doodle-opacity: 0.3; } /* ==================================================================== 7. COMIC BOOK - halftone dots, bold caps, speech bubbles ==================================================================== */ [data-theme="comic"] { --page-pattern: radial-gradient(var(--pattern-a) 2.2px, transparent 2.5px), radial-gradient(var(--pattern-a) 2.2px, transparent 2.5px); --page-pattern-size: 14px 14px; --line: 3px; --line-thin: 2px; --shadow: 5px 5px 0 var(--shadow-color); --shadow-lg: 7px 7px 0 var(--shadow-color); --shadow-press: 1px 1px 0 var(--shadow-color); --press: 4px; --r-card: 6px; --r-field: 6px; --r-pill: 999px; --r-small: 6px; --font-display: "Bangers", "Impact", "Arial Black", sans-serif; --font-body: "Comic Neue", "Comic Sans MS", "Trebuchet MS", sans-serif; --display-weight: 400; --display-spacing: 1.5px; --display-transform: uppercase; --logo-stroke: 2px var(--logo-stroke-color); --logo-shadow: 4px 4px 0 var(--logo-shadow-color); --logo-rotate: -4deg; --sticker-ring: 0 0 0 4px var(--die-cut), 0 0 0 7px var(--line-color), 5px 5px 0 7px var(--shadow-color); --sticker-rotate: 8deg; --sticker-radius: 50%; --chip-ring: 3px 3px 0 var(--shadow-color); --chip-margin: 2px; --gloss: none; --scheme: light; --page: #FFFDF5; --pattern-a: #F9D0CC; --paper: #FFFFFF; --ink: #1A1A1A; --ink-soft: #4A4A4A; --placeholder: #8C8C8C; --line-color: #1A1A1A; --shadow-color: #1A1A1A; --primary: #E8262B; --on-primary: #FFFFFF; --highlight: #FFE03D; --on-highlight: #1A1A1A; --focus: #2E6BE6; --star: #FFE03D; --star-empty: #EFEFEF; --star-stroke: #1A1A1A; --t0: #FF6B6B; --t1: #FFE03D; --t2: #5BD46A; --t3: #4DA3FF; --t4: #C38BFF; --on-accent: #1A1A1A; --field-bg: #FFFFFF; --muted-bg: #F3F0E6; --suggest-bg: #FFF6C7; --suggest-line: #E8D98A; --code-bg: #FFF6C7; --danger: #C8102E; --success: #1E8E3E; --logo-color: #FFE03D; --logo-stroke-color: #1A1A1A; --logo-shadow-color: #E8262B; --die-cut: #FFFFFF; --doodle-opacity: 1; } [data-theme="comic"][data-mode="dark"] { --scheme: dark; --page: #16161F; --pattern-a: #2A2A40; --paper: #262636; --ink: #F5F5F5; --ink-soft: #BDBDC9; --placeholder: #8484A0; --line-color: #EDEDED; --shadow-color: #000000; --primary: #FF3B3F; --on-primary: #1A0A0A; --highlight: #FFE03D; --on-highlight: #1A1A1A; --focus: #6FA8FF; --star: #FFE03D; --star-empty: #3A3A52; --star-stroke: #B89B00; --t0: #FF6B6B; --t1: #FFE03D; --t2: #5BD46A; --t3: #4DA3FF; --t4: #C38BFF; --on-accent: #1A1A1A; --field-bg: #1B1B26; --muted-bg: #33334A; --suggest-bg: #2E2E42; --suggest-line: #45455E; --code-bg: #2E2E42; --danger: #FF7A7A; --success: #6BE07A; --logo-color: #FFE03D; --logo-stroke-color: #000000; --logo-shadow-color: #FF3B3F; --die-cut: #F5F5F5; --doodle-opacity: 0.8; } /* Offset the second halftone layer for a denser print look */ [data-theme="comic"] body, .theme-preview[data-theme="comic"] { background-position: 0 0, 7px 7px; } /* Speech bubbles: login tagline and empty-state messages */ [data-theme="comic"] .tagline, [data-theme="comic"] .empty-state p { position: relative; display: inline-block; padding: 8px 14px; background: var(--paper); border: var(--line-thin) solid var(--line-color); border-radius: 20px; color: var(--ink); font-weight: 700; } [data-theme="comic"] .tagline::after, [data-theme="comic"] .empty-state p::after { content: ""; position: absolute; left: 28px; bottom: -11px; width: 16px; height: 16px; background: var(--paper); border-right: var(--line-thin) solid var(--line-color); border-bottom: var(--line-thin) solid var(--line-color); transform: skewY(40deg) rotate(15deg); } /* ==================================================================== 8. BOTANICAL - leafy greens, linen texture, pressed-flower labels ==================================================================== */ [data-theme="botanical"] { --page-pattern: repeating-linear-gradient(45deg, var(--pattern-a) 0 1px, transparent 1px 11px), repeating-linear-gradient(-45deg, var(--pattern-a) 0 1px, transparent 1px 11px); --page-pattern-size: auto; --line: 2px; --line-thin: 1.5px; --shadow: 0 2px 0 var(--shadow-color); --shadow-lg: 0 4px 0 var(--shadow-color); --shadow-press: 0 0 0 var(--shadow-color); --press: 1px; --r-card: 18px; --r-field: 10px; --r-pill: 4px 14px; --r-small: 14px; --font-display: "Young Serif", Georgia, "Times New Roman", serif; --font-body: "Libre Franklin", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --display-weight: 400; --display-spacing: 0; --display-transform: none; --logo-stroke: 0 transparent; --logo-shadow: none; --logo-rotate: 0deg; --sticker-ring: 0 0 0 4px var(--die-cut), 0 0 0 6px var(--line-color); --sticker-rotate: 0deg; --sticker-radius: 50% 6px 50% 6px; /* leaf */ --chip-ring: none; --chip-margin: 2px; --gloss: none; --scheme: light; --page: #EEF2E6; --pattern-a: #E1E8D5; --paper: #FBFCF7; --ink: #1F3326; --ink-soft: #56705E; --placeholder: #8FA394; --line-color: #2F5A3D; --shadow-color: #C9D7BE; --primary: #3E7C4F; --on-primary: #FFFFFF; --highlight: #DCEBC9; --on-highlight: #1F3326; --focus: #D98E2B; --star: #E0A526; --star-empty: #E3EAD9; --star-stroke: #2F5A3D; --t0: #F2B8B0; --t1: #F3D98B; --t2: #A9D6A0; --t3: #B7D3E8; --t4: #D8C3E8; --on-accent: #1F3326; --field-bg: #FFFFFF; --muted-bg: #E6ECDD; --suggest-bg: #F5F8EE; --suggest-line: #D7E2CA; --code-bg: #F2F6E9; --danger: #A8322D; --success: #2E7D46; --logo-color: #3E7C4F; --die-cut: #FBFCF7; --doodle-opacity: 0.6; } [data-theme="botanical"][data-mode="dark"] { --scheme: dark; --page: #142019; --pattern-a: #1C2B22; --paper: #1B2A21; --ink: #E8F0E3; --ink-soft: #A9BFAE; --placeholder: #6F8876; --line-color: #7FB08C; --shadow-color: #0B120D; --primary: #7FC48F; --on-primary: #10281A; --highlight: #2A4533; --on-highlight: #CFEBD5; --focus: #E5B55A; --star: #E8B43A; --star-empty: #2A3B30; --star-stroke: #7FB08C; --t0: #E8A59C; --t1: #E9CD78; --t2: #97CC8D; --t3: #9FC2DD; --t4: #C7AEDA; --on-accent: #142019; --field-bg: #16231B; --muted-bg: #26382C; --suggest-bg: #22342A; --suggest-line: #33493A; --code-bg: #22342A; --danger: #F28B82; --success: #8FD19E; --logo-color: #7FC48F; --die-cut: #1B2A21; --doodle-opacity: 0.45; } /* Pressed-flower labels: a dashed stitch inside each tag */ [data-theme="botanical"] .chip:not(.small) { outline: 1px dashed var(--line-color); outline-offset: -5px; padding: 6px 14px; } /* ==================================================================== 9. CANDY - pastel stripes, glossy rounded shapes ==================================================================== */ [data-theme="candy"] { --page-pattern: repeating-linear-gradient(45deg, var(--pattern-a) 0 14px, var(--pattern-b) 14px 28px); --page-pattern-size: auto; --line: 2px; --line-thin: 2px; --shadow: 0 4px 0 var(--shadow-color); --shadow-lg: 0 6px 0 var(--shadow-color); --shadow-press: 0 1px 0 var(--shadow-color); --press: 2px; --r-card: 28px; --r-field: 18px; --r-pill: 999px; --r-small: 22px; --font-display: "Chewy", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif; --font-body: "Quicksand", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --display-weight: 400; --display-spacing: 0.5px; --display-transform: none; --logo-stroke: 2px var(--logo-stroke-color); --logo-shadow: 0 4px 0 var(--logo-shadow-color); --logo-rotate: -3deg; --sticker-ring: 0 0 0 4px var(--die-cut), 0 6px 0 4px var(--shadow-color); --sticker-rotate: 4deg; --sticker-radius: 50%; --chip-ring: 0 3px 0 var(--shadow-color); --chip-margin: 2px 2px 5px; --gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.15) 48%, rgba(255, 255, 255, 0) 52%); --scheme: light; --page: #FFF0F6; --pattern-a: #FFF0F6; --pattern-b: #FFE2EE; --paper: #FFFFFF; --ink: #4A1D3F; --ink-soft: #8A5A7E; --placeholder: #C29BB6; --line-color: #F28DB8; --shadow-color: #E86FA5; --primary: #FF7EB6; --on-primary: #4A1D3F; --highlight: #B8F0E0; --on-highlight: #1F4A3E; --focus: #7CC8FF; --star: #FFC94D; --star-empty: #FFE6F0; --star-stroke: #E86FA5; --t0: #FF9EC7; --t1: #FFE07A; --t2: #9BEBC8; --t3: #9DD7FF; --t4: #D4B5FF; --on-accent: #4A1D3F; --field-bg: #FFFFFF; --muted-bg: #FFF0F6; --suggest-bg: #FFF7FB; --suggest-line: #FFD3E5; --code-bg: #F2FFFA; --danger: #D6246E; --success: #178A62; --logo-color: #FF5FA2; --logo-stroke-color: #FFFFFF; --logo-shadow-color: #E86FA5; --die-cut: #FFFFFF; --doodle-opacity: 0.9; } [data-theme="candy"][data-mode="dark"] { --scheme: dark; --page: #2A1630; --pattern-a: #2A1630; --pattern-b: #331C3A; --paper: #3A2042; --ink: #FFEAF5; --ink-soft: #D7AFC9; --placeholder: #9C7690; --line-color: #FF8DC1; --shadow-color: #16091A; --primary: #FF7EB6; --on-primary: #2A1630; --highlight: #6FE3C4; --on-highlight: #12332B; --focus: #7CC8FF; --star: #FFC94D; --star-empty: #4E2F57; --star-stroke: #D69A1E; --t0: #FF9EC7; --t1: #FFE07A; --t2: #8FE6C0; --t3: #93D2FF; --t4: #CDA9FF; --on-accent: #2A1630; --field-bg: #321B39; --muted-bg: #4A2A52; --suggest-bg: #432649; --suggest-line: #5A3662; --code-bg: #432649; --danger: #FF8FB5; --success: #7DE8C0; --logo-color: #FF7EB6; --logo-stroke-color: #16091A; --logo-shadow-color: #16091A; --die-cut: #FFEAF5; --doodle-opacity: 0.7; }