/* ============================================================ Something From Nothing — colour palettes (the "theme" axis) ------------------------------------------------------------ A second, independent axis layered on top of light/dark. Each palette re-skins the design tokens defined in app.css; anything a palette doesn't set falls back to the Carbon base (app.css). Applied as . Carbon is the default and has NO block here — it *is* the base. Selector specificity: [data-theme][data-theme-name] = (0,2,0), which beats the base [data-theme] = (0,1,0), so these win in both modes regardless of source order. ============================================================ */ /* ---------- Collab Pop — friendly indigo + coral, rounded ---------- */ [data-theme="light"][data-theme-name="collab-pop"] { --accent: #5b5ef0; --accent-hover: #4a4ddb; --accent-text: #ffffff; --accent-soft: #eeeefe; --accent-soft-border: #d6d7fb; --accent-secondary: #fb7185; --page-bg: #fbfbff; --page-dots: rgba(40,40,72,0.05); --text: #18181f; --text-secondary: #5c5c6e; --text-disabled: #a6a6b4; --card-bg: #ffffff; --card-stroke: #e6e6ee; --card-stroke-hover: #5b5ef0; --surface-alt: #f0f0f8; --divider: #ebebf3; --nav-bg: #fcfcff; --nav-border: #e6e6ee; --nav-selected: #5b5ef0; --nav-unselected: #5c5c6e; --pill-bg: #eeeef7; --pill-text: #43435a; --dislike-red: #e0245e; --dislike-red-soft: #fff0f4; --interested-green: #1a9e5f; --interested-green-soft: #e6f9ef; --entry-bg: #ffffff; --entry-border: #cdcddc; --entry-placeholder: #9c9caf; --input-focus-ring: rgba(91,94,240,0.20); --chat-bubble-theirs: #f0f0f8; --chat-bubble-mine: #5b5ef0; --chat-bubble-mine-text: #ffffff; --chat-input-bg: #fcfcff; --chat-input-border: #cdcddc; --button-disabled-bg: #e6e6ee; --button-disabled-text: #a6a6b4; --segment-bg: #eeeef7; --segment-stroke: #dcdceb; --overlay-bg: #ffffff; --panel-header-bg: #fbfbff; --panel-stroke: #e6e6ee; --skeleton-block: #ececf5; --empty-icon-bg: #eeeef7; --spinner: #5b5ef0; --back-button-text: #5c5c6e; --shadow-raise: 0 2px 6px rgba(40,40,72,0.05), 0 12px 28px rgba(40,40,72,0.08); --shadow-overlay: 0 8px 24px rgba(40,40,72,0.15), 0 24px 64px rgba(40,40,72,0.18); --radius-s: 8px; --radius-m: 10px; --radius-l: 14px; --radius-xl: 18px; } [data-theme="dark"][data-theme-name="collab-pop"] { --accent: #a5b4fc; --accent-hover: #c3ccff; --accent-text: #14141f; --accent-soft: #242445; --accent-soft-border: #3a3a63; --accent-secondary: #7f3d4d; --page-bg: #14141f; --page-dots: rgba(224,224,248,0.05); --text: #f0f0f5; --text-secondary: #9d9db0; --text-disabled: #54545f; --card-bg: #1c1c2a; --card-stroke: #2c2c40; --card-stroke-hover: #a5b4fc; --surface-alt: #232335; --divider: #28283c; --nav-bg: #181826; --nav-border: #28283c; --nav-selected: #a5b4fc; --nav-unselected: #9d9db0; --pill-bg: #26263a; --pill-text: #c8c8d8; --dislike-red: #ff5a86; --dislike-red-soft: #331824; --interested-green: #3ecf83; --interested-green-soft: #132a20; --entry-bg: #181826; --entry-border: #3a3a52; --entry-placeholder: #6b6b7e; --input-focus-ring: rgba(165,180,252,0.22); --chat-bubble-theirs: #26263a; --chat-bubble-mine: #5b5ef0; --chat-bubble-mine-text: #ffffff; --chat-input-bg: #181826; --chat-input-border: #3a3a52; --button-disabled-bg: #28283c; --button-disabled-text: #6b6b7e; --segment-bg: #181826; --segment-stroke: #33334a; --overlay-bg: #202030; --panel-header-bg: #181826; --panel-stroke: #33334a; --skeleton-block: #26263a; --empty-icon-bg: #26263a; --spinner: #a5b4fc; --back-button-text: #9d9db0; --shadow-raise: 0 2px 8px rgba(0,0,0,0.35), 0 12px 28px rgba(0,0,0,0.45); --shadow-overlay: 0 8px 24px rgba(0,0,0,0.55), 0 24px 64px rgba(0,0,0,0.6); --radius-s: 8px; --radius-m: 10px; --radius-l: 14px; --radius-xl: 18px; } /* ---------- Sage Studio — muted eucalyptus over warm sand ---------- */ [data-theme="light"][data-theme-name="sage"] { --accent: #5f8775; --accent-hover: #4c6f5f; --accent-text: #ffffff; --accent-soft: #eaf1ec; --accent-soft-border: #cfe0d6; --accent-secondary: #d3b0a0; --page-bg: #f3f1e8; --page-dots: rgba(36,39,32,0.05); --text: #242720; --text-secondary: #5e6157; --text-disabled: #a7a99c; --card-bg: #fbfaf5; --card-stroke: #e0ddce; --card-stroke-hover: #5f8775; --surface-alt: #eceadd; --divider: #e6e3d5; --nav-bg: #f8f6ee; --nav-border: #e0ddce; --nav-selected: #5f8775; --nav-unselected: #5e6157; --pill-bg: #eceadd; --pill-text: #40433a; --dislike-red: #c0392b; --dislike-red-soft: #f8ece9; --interested-green: #4a7d34; --interested-green-soft: #ebf3e4; --entry-bg: #fbfaf5; --entry-border: #cbc8b8; --entry-placeholder: #a09e90; --input-focus-ring: rgba(95,135,117,0.20); --chat-bubble-theirs: #eceadd; --chat-bubble-mine: #5f8775; --chat-bubble-mine-text: #ffffff; --chat-input-bg: #f8f6ee; --chat-input-border: #cbc8b8; --button-disabled-bg: #e0ddce; --button-disabled-text: #a7a99c; --segment-bg: #eceadd; --segment-stroke: #d8d5c4; --overlay-bg: #fbfaf5; --panel-header-bg: #f3f1e8; --panel-stroke: #e0ddce; --skeleton-block: #e8e5d6; --empty-icon-bg: #eceadd; --spinner: #5f8775; --back-button-text: #5e6157; --shadow-raise: 0 2px 6px rgba(54,49,38,0.05), 0 12px 28px rgba(54,49,38,0.08); --shadow-overlay: 0 8px 24px rgba(40,36,26,0.16), 0 24px 64px rgba(40,36,26,0.20); --radius-s: 4px; --radius-m: 8px; --radius-l: 12px; --radius-xl: 14px; } [data-theme="dark"][data-theme-name="sage"] { --accent: #8fbca6; --accent-hover: #a9d0bd; --accent-text: #141712; --accent-soft: #22291f; --accent-soft-border: #37432f; --accent-secondary: #6e5349; --page-bg: #1a1c17; --page-dots: rgba(236,234,224,0.045); --text: #eceae0; --text-secondary: #a3a394; --text-disabled: #57584c; --card-bg: #21231c; --card-stroke: #333629; --card-stroke-hover: #8fbca6; --surface-alt: #282a21; --divider: #2e3126; --nav-bg: #16180f; --nav-border: #2e3126; --nav-selected: #8fbca6; --nav-unselected: #a3a394; --pill-bg: #2b2e23; --pill-text: #c9c8ba; --dislike-red: #e57368; --dislike-red-soft: #2f1c19; --interested-green: #77b352; --interested-green-soft: #1d2915; --entry-bg: #16180f; --entry-border: #3d4032; --entry-placeholder: #6d6e60; --input-focus-ring: rgba(143,188,166,0.22); --chat-bubble-theirs: #2b2e23; --chat-bubble-mine: #5f8775; --chat-bubble-mine-text: #f4f6f1; --chat-input-bg: #16180f; --chat-input-border: #3d4032; --button-disabled-bg: #2e3126; --button-disabled-text: #6d6e60; --segment-bg: #16180f; --segment-stroke: #383b2d; --overlay-bg: #24261e; --panel-header-bg: #16180f; --panel-stroke: #383b2d; --skeleton-block: #2b2e23; --empty-icon-bg: #2b2e23; --spinner: #8fbca6; --back-button-text: #a3a394; --shadow-raise: 0 2px 8px rgba(0,0,0,0.3), 0 12px 28px rgba(0,0,0,0.4); --shadow-overlay: 0 8px 24px rgba(0,0,0,0.5), 0 24px 64px rgba(0,0,0,0.55); --radius-s: 4px; --radius-m: 8px; --radius-l: 12px; --radius-xl: 14px; } /* ---------- Blueprint — drafting blue on cool grounds ---------- */ [data-theme="light"][data-theme-name="blueprint"] { --accent: #2563eb; --accent-hover: #1d4ed8; --accent-text: #ffffff; --accent-soft: #e8eefc; --accent-soft-border: #c6d6f5; --accent-secondary: #9db4d8; --page-bg: #eef1f6; --page-dots: rgba(37,99,235,0.07); --text: #122036; --text-secondary: #4a5a72; --text-disabled: #9aa7bc; --card-bg: #ffffff; --card-stroke: #d3dced; --card-stroke-hover: #2563eb; --surface-alt: #e4e9f2; --divider: #dde3ee; --nav-bg: #f4f6fb; --nav-border: #d3dced; --nav-selected: #2563eb; --nav-unselected: #4a5a72; --pill-bg: #e4e9f2; --pill-text: #2f3d54; --dislike-red: #d32029; --dislike-red-soft: #fdeeee; --interested-green: #1f7a4d; --interested-green-soft: #e4f4ec; --entry-bg: #ffffff; --entry-border: #c2cee2; --entry-placeholder: #9aa7bc; --input-focus-ring: rgba(37,99,235,0.22); --chat-bubble-theirs: #e4e9f2; --chat-bubble-mine: #2563eb; --chat-bubble-mine-text: #ffffff; --chat-input-bg: #f4f6fb; --chat-input-border: #c2cee2; --button-disabled-bg: #d3dced; --button-disabled-text: #9aa7bc; --segment-bg: #e4e9f2; --segment-stroke: #cdd7e8; --overlay-bg: #ffffff; --panel-header-bg: #eef1f6; --panel-stroke: #d3dced; --skeleton-block: #e0e6f0; --empty-icon-bg: #e4e9f2; --spinner: #2563eb; --back-button-text: #4a5a72; --shadow-raise: 0 2px 6px rgba(18,32,54,0.06), 0 12px 28px rgba(18,32,54,0.08); --shadow-overlay: 0 8px 24px rgba(18,32,54,0.16), 0 24px 64px rgba(18,32,54,0.20); --radius-s: 2px; --radius-m: 3px; --radius-l: 4px; --radius-xl: 6px; } [data-theme="dark"][data-theme-name="blueprint"] { --accent: #4cc4f0; --accent-hover: #79d4f5; --accent-text: #06121f; --accent-soft: #10243d; --accent-soft-border: #24406a; --accent-secondary: #2b4568; --page-bg: #0b1a30; --page-dots: rgba(120,200,255,0.08); --text: #dbe6f5; --text-secondary: #93a6c2; --text-disabled: #52657f; --card-bg: #12233f; --card-stroke: #24406a; --card-stroke-hover: #4cc4f0; --surface-alt: #16294a; --divider: #1d3557; --nav-bg: #0c1c33; --nav-border: #1d3557; --nav-selected: #4cc4f0; --nav-unselected: #93a6c2; --pill-bg: #172c4c; --pill-text: #b9c9e0; --dislike-red: #ff5d67; --dislike-red-soft: #35171c; --interested-green: #3fc47f; --interested-green-soft: #10281e; --entry-bg: #0c1c33; --entry-border: #294a75; --entry-placeholder: #64778f; --input-focus-ring: rgba(76,196,240,0.24); --chat-bubble-theirs: #172c4c; --chat-bubble-mine: #4cc4f0; --chat-bubble-mine-text: #06121f; --chat-input-bg: #0c1c33; --chat-input-border: #294a75; --button-disabled-bg: #1d3557; --button-disabled-text: #64778f; --segment-bg: #0c1c33; --segment-stroke: #274263; --overlay-bg: #142845; --panel-header-bg: #0c1c33; --panel-stroke: #274263; --skeleton-block: #172c4c; --empty-icon-bg: #172c4c; --spinner: #4cc4f0; --back-button-text: #93a6c2; --shadow-raise: 0 2px 8px rgba(0,0,0,0.35), 0 12px 28px rgba(0,0,0,0.45); --shadow-overlay: 0 8px 24px rgba(0,0,0,0.55), 0 24px 64px rgba(0,0,0,0.60); --radius-s: 2px; --radius-m: 3px; --radius-l: 4px; --radius-xl: 6px; } /* ---------- Sunrise — warm amber over sandy neutrals ---------- */ [data-theme="light"][data-theme-name="sunrise"] { --accent: #ea7a1c; --accent-hover: #c9640f; --accent-text: #2b1608; --accent-soft: #fef1e2; --accent-soft-border: #f8dcbd; --accent-secondary: #f9d4dc; --page-bg: #fff8f0; --page-dots: rgba(43,29,22,0.05); --text: #2b1d16; --text-secondary: #6f5a4c; --text-disabled: #b6a493; --card-bg: #fffdf9; --card-stroke: #efe4d5; --card-stroke-hover: #ea7a1c; --surface-alt: #f6ece0; --divider: #eee2d3; /* nav-selected: deeper amber than the accent — #ea7a1c is only 2.8:1 on the near-white nav, too faint for the active item; #b45309 keeps the hue at ~5:1. */ --nav-bg: #fffcf6; --nav-border: #efe4d5; --nav-selected: #b45309; --nav-unselected: #6f5a4c; --pill-bg: #f4e9db; --pill-text: #5a4738; --dislike-red: #d21f3c; --dislike-red-soft: #fdeef0; --interested-green: #1f7a44; --interested-green-soft: #e4f6ea; --entry-bg: #fffdf9; --entry-border: #dccbb6; --entry-placeholder: #b09f8d; --input-focus-ring: rgba(234,122,28,0.22); --chat-bubble-theirs: #f4e9db; --chat-bubble-mine: #ea7a1c; --chat-bubble-mine-text: #2b1608; --chat-input-bg: #fffcf6; --chat-input-border: #dccbb6; --button-disabled-bg: #eee2d3; --button-disabled-text: #b6a493; --segment-bg: #f4e9db; --segment-stroke: #e4d6c3; --overlay-bg: #fffdf9; --panel-header-bg: #fff8f0; --panel-stroke: #efe4d5; --skeleton-block: #f0e5d6; --empty-icon-bg: #f4e9db; --spinner: #ea7a1c; --back-button-text: #6f5a4c; --shadow-raise: 0 2px 6px rgba(60,36,16,0.06), 0 12px 28px rgba(60,36,16,0.09); --shadow-overlay: 0 8px 24px rgba(60,36,16,0.16), 0 24px 64px rgba(60,36,16,0.20); --radius-s: 6px; --radius-m: 10px; --radius-l: 14px; --radius-xl: 18px; } [data-theme="dark"][data-theme-name="sunrise"] { --accent: #f5a524; --accent-hover: #f7b84e; --accent-text: #241206; --accent-soft: #3a2410; --accent-soft-border: #59371a; --accent-secondary: #5a2e3a; --page-bg: #1b1310; --page-dots: rgba(246,237,225,0.05); --text: #f6ede1; --text-secondary: #b6a493; --text-disabled: #6f5f50; --card-bg: #241a14; --card-stroke: #3a2c22; --card-stroke-hover: #f5a524; --surface-alt: #2c2017; --divider: #33261d; --nav-bg: #1f1611; --nav-border: #33261d; --nav-selected: #f5a524; --nav-unselected: #b6a493; --pill-bg: #302217; --pill-text: #d6c4b1; --dislike-red: #f4586e; --dislike-red-soft: #3a1a1f; --interested-green: #4cc079; --interested-green-soft: #16281d; --entry-bg: #1f1611; --entry-border: #40301f; --entry-placeholder: #7d6c5b; --input-focus-ring: rgba(245,165,36,0.24); --chat-bubble-theirs: #302217; --chat-bubble-mine: #f5a524; --chat-bubble-mine-text: #241206; --chat-input-bg: #1f1611; --chat-input-border: #40301f; --button-disabled-bg: #302217; --button-disabled-text: #7d6c5b; --segment-bg: #1f1611; --segment-stroke: #3d2e1f; --overlay-bg: #281c15; --panel-header-bg: #1f1611; --panel-stroke: #3d2e1f; --skeleton-block: #302217; --empty-icon-bg: #302217; --spinner: #f5a524; --back-button-text: #b6a493; --shadow-raise: 0 2px 8px rgba(0,0,0,0.35), 0 12px 28px rgba(0,0,0,0.45); --shadow-overlay: 0 8px 24px rgba(0,0,0,0.55), 0 24px 64px rgba(0,0,0,0.6); --radius-s: 6px; --radius-m: 10px; --radius-l: 14px; --radius-xl: 18px; } /* ---------- Mono Bold — brutalist black/white + electric orange ---------- */ [data-theme="light"][data-theme-name="mono-bold"] { --accent: #ff4d00; --accent-hover: #e63d00; --accent-text: #0d0d0d; --accent-soft: rgba(255,77,0,0.10); --accent-soft-border: rgba(255,77,0,0.35); --accent-secondary: #2b4cff; --page-bg: #ffffff; --page-dots: rgba(13,13,13,0.06); --text: #0d0d0d; --text-secondary: #3a3a3a; --text-disabled: #8a8a8a; --card-bg: #ffffff; --card-stroke: #111111; --card-stroke-hover: #ff4d00; --surface-alt: #f2f1ec; --divider: #111111; --nav-bg: #ffffff; --nav-border: #111111; --nav-selected: #ff4d00; --nav-unselected: #0d0d0d; --pill-bg: #0d0d0d; --pill-text: #ffffff; --dislike-red: #e00020; --dislike-red-soft: rgba(224,0,32,0.08); --interested-green: #00963f; --interested-green-soft: rgba(0,150,63,0.08); --entry-bg: #ffffff; --entry-border: #111111; --entry-placeholder: #8a8a8a; --input-focus-ring: rgba(255,77,0,0.30); --chat-bubble-theirs: #f2f1ec; --chat-bubble-mine: #ff4d00; --chat-bubble-mine-text: #0d0d0d; --chat-input-bg: #ffffff; --chat-input-border: #111111; --button-disabled-bg: #deddd7; --button-disabled-text: #8a8a8a; --segment-bg: #f2f1ec; --segment-stroke: #111111; --overlay-bg: #ffffff; --panel-header-bg: #f6f5f2; --panel-stroke: #111111; --skeleton-block: #e6e5df; --empty-icon-bg: #f2f1ec; --spinner: #ff4d00; --back-button-text: #0d0d0d; --shadow-raise: 4px 4px 0 #111111; --shadow-overlay: 8px 8px 0 #111111; --radius-s: 0px; --radius-m: 0px; --radius-l: 0px; --radius-xl: 2px; --surface-border-width: 2px; } [data-theme="dark"][data-theme-name="mono-bold"] { --accent: #ff5a1f; --accent-hover: #ff7440; --accent-text: #0a0a0a; --accent-soft: rgba(255,90,31,0.14); --accent-soft-border: rgba(255,90,31,0.40); --accent-secondary: #5a72ff; --page-bg: #0a0a0a; --page-dots: rgba(244,243,238,0.05); --text: #f4f3ee; --text-secondary: #bdbcb5; --text-disabled: #6a6a66; --card-bg: #141412; --card-stroke: #eeeeee; --card-stroke-hover: #ff5a1f; --surface-alt: #1c1c1a; --divider: #eeeeee; --nav-bg: #0a0a0a; --nav-border: #eeeeee; --nav-selected: #ff5a1f; --nav-unselected: #f4f3ee; --pill-bg: #f4f3ee; --pill-text: #0a0a0a; --dislike-red: #ff4d5e; --dislike-red-soft: rgba(255,77,94,0.14); --interested-green: #3ddc7f; --interested-green-soft: rgba(61,220,127,0.14); --entry-bg: #0a0a0a; --entry-border: #eeeeee; --entry-placeholder: #6a6a66; --input-focus-ring: rgba(255,90,31,0.35); --chat-bubble-theirs: #1c1c1a; --chat-bubble-mine: #ff5a1f; --chat-bubble-mine-text: #0a0a0a; --chat-input-bg: #0a0a0a; --chat-input-border: #eeeeee; --button-disabled-bg: #26261f; --button-disabled-text: #6a6a66; --segment-bg: #141412; --segment-stroke: #eeeeee; --overlay-bg: #141412; --panel-header-bg: #0a0a0a; --panel-stroke: #eeeeee; --skeleton-block: #1f1f1c; --empty-icon-bg: #1c1c1a; --spinner: #ff5a1f; --back-button-text: #f4f3ee; --shadow-raise: 4px 4px 0 #eeeeee; --shadow-overlay: 8px 8px 0 #eeeeee; --radius-s: 0px; --radius-m: 0px; --radius-l: 0px; --radius-xl: 2px; --surface-border-width: 2px; } /* ============================================================ AURORA GLASS — premium glassmorphism, dark-first Deep-space gradients, translucent blurred surfaces, luminous violet + cyan accents, medium-round radii. ============================================================ */ [data-theme="light"][data-theme-name="aurora"] { /* --- colour tokens --- */ --accent: #6d5ce7; --accent-hover: #5b48d9; --accent-text: #ffffff; --accent-soft: rgba(109, 92, 231, 0.10); --accent-soft-border: rgba(109, 92, 231, 0.30); --accent-secondary: #0b7f94; --page-bg: #eef0fb; --page-dots: rgba(109, 92, 231, 0.14); --text: #1d1b33; --text-secondary: #55527a; --text-disabled: #a19fc0; --card-bg: rgba(255, 255, 255, 0.65); --card-stroke: rgba(255, 255, 255, 0.85); --card-stroke-hover: rgba(109, 92, 231, 0.45); --surface-alt: rgba(255, 255, 255, 0.55); --divider: rgba(29, 27, 51, 0.10); --nav-bg: rgba(255, 255, 255, 0.55); --nav-border: rgba(255, 255, 255, 0.75); --nav-selected: #2a2547; --nav-unselected: #6c6990; --pill-bg: rgba(109, 92, 231, 0.10); --pill-text: #5342c4; --dislike-red: #cf3348; --dislike-red-soft: rgba(207, 51, 72, 0.12); --interested-green: #0e9163; --interested-green-soft: rgba(14, 145, 99, 0.12); --entry-bg: rgba(255, 255, 255, 0.72); --entry-border: rgba(109, 92, 231, 0.22); --entry-placeholder: #8f8cb2; --input-focus-ring: rgba(109, 92, 231, 0.28); --chat-bubble-theirs: rgba(255, 255, 255, 0.82); --chat-bubble-mine: #6d5ce7; --chat-bubble-mine-text: #ffffff; --chat-input-bg: rgba(255, 255, 255, 0.78); --chat-input-border: rgba(109, 92, 231, 0.20); --button-disabled-bg: rgba(29, 27, 51, 0.08); --button-disabled-text: #9b98b8; --segment-bg: rgba(255, 255, 255, 0.45); --segment-stroke: rgba(109, 92, 231, 0.16); --overlay-bg: rgba(255, 255, 255, 0.82); --panel-header-bg: rgba(255, 255, 255, 0.65); --panel-stroke: rgba(109, 92, 231, 0.16); --skeleton-block: rgba(29, 27, 51, 0.07); --empty-icon-bg: rgba(109, 92, 231, 0.12); --spinner: #6d5ce7; --back-button-text: #5342c4; --shadow-raise: 0 12px 32px rgba(109, 92, 231, 0.20), 0 2px 8px rgba(43, 36, 90, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95); --shadow-overlay: 0 24px 64px rgba(76, 60, 180, 0.24), 0 2px 12px rgba(43, 36, 90, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.95); /* --- character tokens --- */ --radius-s: 10px; --radius-m: 12px; --radius-l: 16px; --radius-xl: 20px; --surface-border-width: 1px; --font-ui: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif; --font-display: 'Nunito', 'Segoe UI', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', Consolas, monospace; --space-l: 18px; --space-xl: 24px; --space-xxl: 30px; --space-xxxl: 40px; --font-display-size: 34px; } [data-theme="dark"][data-theme-name="aurora"] { /* --- colour tokens --- */ --accent: #a78bfa; --accent-hover: #bfa8ff; --accent-text: #14142b; --accent-soft: rgba(167, 139, 250, 0.14); --accent-soft-border: rgba(167, 139, 250, 0.38); --accent-secondary: #67e8f9; --page-bg: #0d0d1f; --page-dots: rgba(255, 255, 255, 0.05); --text: #f1f0fb; --text-secondary: #aaa7cc; --text-disabled: #5f5c82; --card-bg: rgba(22, 22, 40, 0.55); --card-stroke: rgba(255, 255, 255, 0.09); --card-stroke-hover: rgba(255, 255, 255, 0.24); --surface-alt: rgba(255, 255, 255, 0.05); --divider: rgba(255, 255, 255, 0.08); --nav-bg: rgba(15, 15, 34, 0.62); --nav-border: rgba(255, 255, 255, 0.08); --nav-selected: #ece9ff; --nav-unselected: #918eb6; --pill-bg: rgba(167, 139, 250, 0.13); --pill-text: #cbbdff; --dislike-red: #f87171; --dislike-red-soft: rgba(248, 113, 113, 0.14); --interested-green: #34d399; --interested-green-soft: rgba(52, 211, 153, 0.14); --entry-bg: rgba(255, 255, 255, 0.06); --entry-border: rgba(255, 255, 255, 0.13); --entry-placeholder: #7b78a0; --input-focus-ring: rgba(167, 139, 250, 0.35); --chat-bubble-theirs: rgba(255, 255, 255, 0.08); --chat-bubble-mine: #6b48e8; --chat-bubble-mine-text: #ffffff; --chat-input-bg: rgba(255, 255, 255, 0.06); --chat-input-border: rgba(255, 255, 255, 0.13); --button-disabled-bg: rgba(255, 255, 255, 0.07); --button-disabled-text: #6b6890; --segment-bg: rgba(255, 255, 255, 0.06); --segment-stroke: rgba(255, 255, 255, 0.10); --overlay-bg: rgba(30, 30, 56, 0.82); --panel-header-bg: rgba(24, 24, 48, 0.72); --panel-stroke: rgba(255, 255, 255, 0.10); --skeleton-block: rgba(255, 255, 255, 0.07); --empty-icon-bg: rgba(167, 139, 250, 0.13); --spinner: #a78bfa; --back-button-text: #cbbdff; --shadow-raise: 0 12px 36px rgba(124, 92, 255, 0.30), 0 4px 12px rgba(6, 4, 20, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.10); --shadow-overlay: 0 28px 72px rgba(8, 6, 28, 0.72), 0 0 40px rgba(124, 92, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.10); /* --- character tokens --- */ --radius-s: 10px; --radius-m: 12px; --radius-l: 16px; --radius-xl: 20px; --surface-border-width: 1px; --font-ui: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif; --font-display: 'Nunito', 'Segoe UI', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', Consolas, monospace; --space-l: 18px; --space-xl: 24px; --space-xxl: 30px; --space-xxxl: 40px; --font-display-size: 34px; } /* ============ structural rules ============ */ /* Ground: frosted morning sky (light) — gradients replace the dot grid */ [data-theme-name="aurora"] body { background-color: #eef0fb; background-image: radial-gradient(50rem 36rem at 10% -8%, rgba(167, 139, 250, 0.28), transparent 62%), radial-gradient(44rem 34rem at 90% 8%, rgba(103, 232, 249, 0.24), transparent 62%), radial-gradient(56rem 44rem at 50% 112%, rgba(109, 92, 231, 0.16), transparent 65%); background-attachment: fixed; } /* Ground: deep-space aurora (dark) */ [data-theme="dark"][data-theme-name="aurora"] body { background-color: #0d0d1f; background-image: radial-gradient(54rem 40rem at 12% -10%, rgba(124, 92, 255, 0.34), transparent 60%), radial-gradient(46rem 36rem at 88% 6%, rgba(45, 212, 191, 0.17), transparent 62%), radial-gradient(64rem 50rem at 55% 115%, rgba(36, 58, 140, 0.38), transparent 65%); background-attachment: fixed; } /* Glass cards */ [data-theme-name="aurora"] .section-card, [data-theme-name="aurora"] .list-card, [data-theme-name="aurora"] .tile-card { -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 4px 18px rgba(109, 92, 231, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.90); } [data-theme="dark"][data-theme-name="aurora"] .section-card, [data-theme="dark"][data-theme-name="aurora"] .list-card, [data-theme="dark"][data-theme-name="aurora"] .tile-card { box-shadow: 0 4px 22px rgba(6, 4, 20, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.07); } /* Frosted navigation chrome */ [data-theme-name="aurora"] .app-sidebar, [data-theme-name="aurora"] .tab-bar { -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); } /* Titles + brand */ [data-theme-name="aurora"] .page-title { font-weight: 800; letter-spacing: -0.01em; } [data-theme-name="aurora"] .page-title.ruled::after { background: linear-gradient(90deg, var(--accent), var(--accent-secondary)); border-radius: 999px; } [data-theme="dark"][data-theme-name="aurora"] .brand-mark { text-shadow: 0 0 18px rgba(167, 139, 250, 0.50); } /* Mono eyebrows glow cyan */ [data-theme-name="aurora"] .meta-label, [data-theme-name="aurora"] .intro-subtitle { color: var(--accent-secondary); letter-spacing: 0.14em; } /* Pill buttons with luminous accent gradient */ [data-theme-name="aurora"] .btn { border-radius: 999px; } [data-theme-name="aurora"] .btn-blue { background-image: linear-gradient(150deg, var(--accent), var(--accent-hover)); box-shadow: 0 6px 18px rgba(124, 92, 255, 0.28); } [data-theme-name="aurora"] .btn-blue:hover:not(:disabled) { box-shadow: 0 8px 24px rgba(124, 92, 255, 0.42); } [data-theme-name="aurora"] .btn-white, [data-theme-name="aurora"] .btn-ghost, [data-theme-name="aurora"] .btn-action { background-color: var(--surface-alt); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } [data-theme-name="aurora"] .btn-danger { box-shadow: 0 6px 18px rgba(207, 51, 72, 0.28); } /* Glassy meta chips */ [data-theme-name="aurora"] .pill { border-radius: 999px; border: 1px solid var(--accent-soft-border); } /* Frosted inputs */ [data-theme-name="aurora"] .entry-filled { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: var(--radius-m); } /* Glass segmented control */ [data-theme-name="aurora"] .segmented { border-radius: 999px; border: 1px solid var(--segment-stroke); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } [data-theme-name="aurora"] .segmented button { border-radius: 999px; } [data-theme-name="aurora"] .segmented button.active { box-shadow: 0 2px 10px rgba(124, 92, 255, 0.22); } /* Chat: rounded glass bubbles, glowing mine */ [data-theme-name="aurora"] .chat-bubble { border-radius: var(--radius-xl); } [data-theme-name="aurora"] .chat-bubble-mine { background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 60%); box-shadow: 0 4px 14px rgba(124, 92, 255, 0.25); } [data-theme-name="aurora"] .chat-bubble-theirs { border: 1px solid var(--card-stroke); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } /* Heavy-frost overlays */ [data-theme-name="aurora"] .modal-card, [data-theme-name="aurora"] .action-sheet { -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3); border: 1px solid var(--panel-stroke); } /* Nav item + tab glow states */ [data-theme-name="aurora"] .side-item.active { box-shadow: inset 0 0 0 1px var(--accent-soft-border); } [data-theme="dark"][data-theme-name="aurora"] .tab-item.active { text-shadow: 0 0 12px rgba(167, 139, 250, 0.60); } /* Small glass details */ [data-theme-name="aurora"] .avatar { box-shadow: 0 0 0 2px var(--card-stroke); } [data-theme-name="aurora"] .empty-state-icon { box-shadow: 0 0 24px rgba(124, 92, 255, 0.20); } [data-theme-name="aurora"] .divider { background: linear-gradient(90deg, transparent, var(--divider) 18%, var(--divider) 82%, transparent); } [data-theme-name="aurora"] .side-badge, [data-theme-name="aurora"] .tab-badge { box-shadow: 0 0 10px rgba(124, 92, 255, 0.45); } /* ============================================================ EDITORIAL — heritage broadsheet: oxblood ink on gallery paper. The Economist meets a printers' studio. ============================================================ */ [data-theme="light"][data-theme-name="editorial"] { /* colour tokens */ --accent: #8a2232; --accent-hover: #6e1a28; --accent-text: #ffffff; --accent-soft: #f5e8ea; --accent-soft-border: #e3c5cb; --accent-secondary: #274357; --page-bg: #f9f8f4; --page-dots: rgba(26, 25, 23, 0.02); --text: #1a1917; --text-secondary: #5c574f; --text-disabled: #a39d92; --card-bg: #fffefb; --card-stroke: #e5e1d8; --card-stroke-hover: #8a2232; --surface-alt: #f2f0e9; --divider: #e8e4da; --nav-bg: #fbfaf7; --nav-border: #e5e1d8; --nav-selected: #8a2232; --nav-unselected: #6b665d; --pill-bg: rgba(0, 0, 0, 0); --pill-text: #5c574f; --dislike-red: #c0361f; --dislike-red-soft: #f9e4e0; --interested-green: #2e6b3f; --interested-green-soft: #e2efe3; --entry-bg: #fffefb; --entry-border: #d8d3c8; --entry-placeholder: #a39d92; --input-focus-ring: rgba(138, 34, 50, 0.18); --chat-bubble-theirs: #f0ede5; --chat-bubble-mine: #8a2232; --chat-bubble-mine-text: #fdf4f0; --chat-input-bg: #fffefb; --chat-input-border: #d8d3c8; --button-disabled-bg: #e8e4da; --button-disabled-text: #a39d92; --segment-bg: #efece3; --segment-stroke: #ddd8cc; --overlay-bg: #fffefb; --panel-header-bg: #f6f4ee; --panel-stroke: #e5e1d8; --skeleton-block: #ece8de; --empty-icon-bg: #f0ede5; --spinner: #8a2232; --back-button-text: #5c574f; --shadow-raise: 0 1px 2px rgba(26, 25, 23, 0.08), 0 4px 12px rgba(26, 25, 23, 0.06); --shadow-overlay: 0 8px 32px rgba(26, 25, 23, 0.18), 0 2px 8px rgba(26, 25, 23, 0.10); /* character tokens */ --radius-s: 2px; --radius-m: 3px; --radius-l: 4px; --radius-xl: 6px; --surface-border-width: 1px; --font-ui: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif; --font-display: 'IBM Plex Serif', Georgia, serif; --font-mono: 'IBM Plex Mono', Consolas, monospace; } [data-theme="dark"][data-theme-name="editorial"] { /* colour tokens */ --accent: #e07a8b; --accent-hover: #e995a4; --accent-text: #2a1216; --accent-soft: rgba(224, 122, 139, 0.14); --accent-soft-border: rgba(224, 122, 139, 0.32); --accent-secondary: #9db8cc; --page-bg: #151312; --page-dots: rgba(240, 237, 230, 0.02); --text: #f0ede6; --text-secondary: #b3ada1; --text-disabled: #6e685e; --card-bg: #1d1a18; --card-stroke: #33302b; --card-stroke-hover: #e07a8b; --surface-alt: #24201d; --divider: #2e2a26; --nav-bg: #181513; --nav-border: #2e2a26; --nav-selected: #e07a8b; --nav-unselected: #9b9488; --pill-bg: rgba(0, 0, 0, 0); --pill-text: #b3ada1; --dislike-red: #e5695a; --dislike-red-soft: rgba(229, 105, 90, 0.15); --interested-green: #6fbf85; --interested-green-soft: rgba(111, 191, 133, 0.14); --entry-bg: #1d1a18; --entry-border: #3a3630; --entry-placeholder: #7d7669; --input-focus-ring: rgba(224, 122, 139, 0.25); --chat-bubble-theirs: #262220; --chat-bubble-mine: #6e2634; --chat-bubble-mine-text: #f6e4e4; --chat-input-bg: #1d1a18; --chat-input-border: #3a3630; --button-disabled-bg: #2b2723; --button-disabled-text: #6e685e; --segment-bg: #201d1a; --segment-stroke: #33302b; --overlay-bg: #211e1b; --panel-header-bg: #262220; --panel-stroke: #33302b; --skeleton-block: #2b2723; --empty-icon-bg: #262220; --spinner: #e07a8b; --back-button-text: #b3ada1; --shadow-raise: 0 1px 2px rgba(0, 0, 0, 0.40), 0 4px 12px rgba(0, 0, 0, 0.30); --shadow-overlay: 0 8px 32px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.40); /* character tokens */ --radius-s: 2px; --radius-m: 3px; --radius-l: 4px; --radius-xl: 6px; --surface-border-width: 1px; --font-ui: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif; --font-display: 'IBM Plex Serif', Georgia, serif; --font-mono: 'IBM Plex Mono', Consolas, monospace; } /* ---------- structural: masthead typography ---------- */ [data-theme-name="editorial"] .page-title, [data-theme-name="editorial"] .intro-title { font-family: var(--font-display); letter-spacing: -0.02em; } [data-theme-name="editorial"] .page-title.ruled::after { width: 56px; height: 3px; background: var(--accent); } [data-theme-name="editorial"] .card-title { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; } [data-theme-name="editorial"] .section-header { font-family: var(--font-display); letter-spacing: -0.01em; } [data-theme-name="editorial"] .brand-mark { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.015em; } /* red kickers, Economist-style */ [data-theme-name="editorial"] .meta-label, [data-theme-name="editorial"] .intro-subtitle { color: var(--accent); letter-spacing: 0.08em; } /* ---------- structural: printers' chips & buttons ---------- */ [data-theme-name="editorial"] .pill { background: transparent; border: 1px solid var(--divider); font-family: var(--font-mono); font-size: var(--font-small); text-transform: uppercase; letter-spacing: 0.07em; } [data-theme-name="editorial"] .btn { letter-spacing: 0.02em; } /* letterpress press-down on hover */ [data-theme-name="editorial"] .btn-blue:hover:not(:disabled) { background: var(--accent-hover); box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.22); } /* ---------- structural: cards — no lift, ink the frame ---------- */ [data-theme-name="editorial"] .list-card:hover, [data-theme-name="editorial"] .tile-card:hover { transform: none; border-color: var(--accent); box-shadow: 0 1px 0 rgba(26, 25, 23, 0.05); } [data-theme="dark"][data-theme-name="editorial"] .list-card:hover, [data-theme="dark"][data-theme-name="editorial"] .tile-card:hover { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); } /* ---------- structural: squared details ---------- */ [data-theme-name="editorial"] .chat-bubble { border-radius: var(--radius-m); } [data-theme-name="editorial"] .avatar { border-radius: var(--radius-m); } [data-theme-name="editorial"] .empty-state-icon { border-radius: var(--radius-m); } [data-theme-name="editorial"] .entry-filled { border-radius: var(--radius-s); } [data-theme-name="editorial"] .segmented, [data-theme-name="editorial"] .segmented button { border-radius: var(--radius-s); } [data-theme-name="editorial"] .segmented button { font-family: var(--font-mono); font-size: var(--font-caption); text-transform: uppercase; letter-spacing: 0.05em; } [data-theme-name="editorial"] .segmented button.active { font-weight: 600; } [data-theme-name="editorial"] .side-item.active { font-weight: 600; } [data-theme-name="editorial"] .side-badge, [data-theme-name="editorial"] .tab-badge { border-radius: var(--radius-s); font-family: var(--font-mono); } [data-theme-name="editorial"] .modal-card, [data-theme-name="editorial"] .action-sheet { border: 1px solid var(--panel-stroke); } [data-theme-name="editorial"] .modal-card { border-radius: var(--radius-l); } /* ============================================================ Candy Pop — soft playful pastel, borderless elevated ============================================================ */ [data-theme="light"][data-theme-name="candy"] { /* colour tokens */ --accent: #ec5fa8; --accent-hover: #d94793; --accent-text: #ffffff; --accent-soft: #fbe7f2; --accent-soft-border: #f5c6df; --accent-secondary: #7cc7f5; --page-bg: #faf5fb; --page-dots: rgba(236, 95, 168, 0.12); --text: #3b2a37; --text-secondary: #6f5a6a; --text-disabled: #b3a2af; --card-bg: #ffffff; --card-stroke: #f3e4ef; --card-stroke-hover: #f0d3e3; --surface-alt: #f6edf5; --divider: #f0e2ec; --nav-bg: #fefbfe; --nav-border: #f3e6f1; --nav-selected: #d8478f; --nav-unselected: #7d6678; --pill-bg: #fbe3f0; --pill-text: #b02c72; --dislike-red: #e5484d; --dislike-red-soft: #fde8ea; --interested-green: #2e9e60; --interested-green-soft: #ddf5e8; --entry-bg: #ffffff; --entry-border: #efdcea; --entry-placeholder: #b19cab; --input-focus-ring: rgba(236, 95, 168, 0.28); --chat-bubble-theirs: #f5eaf3; --chat-bubble-mine: #ec5fa8; --chat-bubble-mine-text: #ffffff; --chat-input-bg: #ffffff; --chat-input-border: #efdcea; --button-disabled-bg: #f0e5ee; --button-disabled-text: #b19fab; --segment-bg: #f3e7f1; --segment-stroke: #ecd9e7; --overlay-bg: #ffffff; --panel-header-bg: #fdf7fc; --panel-stroke: #f2e2ee; --skeleton-block: #f2e6f0; --empty-icon-bg: #f9e9f3; --spinner: #ec5fa8; --back-button-text: #7d6678; --shadow-raise: 0 6px 14px rgba(236, 95, 168, 0.14), 0 18px 40px rgba(173, 122, 187, 0.22); --shadow-overlay: 0 8px 24px rgba(236, 95, 168, 0.12), 0 24px 60px rgba(120, 70, 120, 0.22); /* character tokens */ --radius-s: 12px; --radius-m: 16px; --radius-l: 20px; --radius-xl: 24px; --radius-pill: 999px; --font-ui: 'Nunito', 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif; --font-display: 'Nunito', 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif; --space-l: 18px; --space-xl: 22px; --space-xxl: 26px; } [data-theme="dark"][data-theme-name="candy"] { /* colour tokens */ --accent: #f8a0cd; --accent-hover: #fbb9d9; --accent-text: #46152b; --accent-soft: rgba(248, 160, 205, 0.14); --accent-soft-border: rgba(248, 160, 205, 0.32); --accent-secondary: #7cc7f5; --page-bg: #201824; --page-dots: rgba(248, 160, 205, 0.08); --text: #f5edf4; --text-secondary: #bcabbb; --text-disabled: #6f5f70; --card-bg: #2a2130; --card-stroke: #3a2e41; --card-stroke-hover: #4c3b54; --surface-alt: #332839; --divider: #3a2e41; --nav-bg: #251c2a; --nav-border: #362a3c; --nav-selected: #f8a0cd; --nav-unselected: #a291a3; --pill-bg: rgba(248, 160, 205, 0.16); --pill-text: #f8a0cd; --dislike-red: #ff7a85; --dislike-red-soft: rgba(255, 122, 133, 0.16); --interested-green: #57d091; --interested-green-soft: rgba(87, 208, 145, 0.15); --entry-bg: #2e2434; --entry-border: #453549; --entry-placeholder: #8e7c8f; --input-focus-ring: rgba(248, 160, 205, 0.30); --chat-bubble-theirs: #362a3d; --chat-bubble-mine: #f8a0cd; --chat-bubble-mine-text: #46152b; --chat-input-bg: #2e2434; --chat-input-border: #453549; --button-disabled-bg: #382d3e; --button-disabled-text: #7d6b7e; --segment-bg: #2d2333; --segment-stroke: #3f3245; --overlay-bg: #2f2536; --panel-header-bg: #2b2231; --panel-stroke: #413346; --skeleton-block: #382c3f; --empty-icon-bg: rgba(248, 160, 205, 0.12); --spinner: #f8a0cd; --back-button-text: #bcabbb; --shadow-raise: 0 6px 16px rgba(0, 0, 0, 0.45), 0 20px 44px rgba(0, 0, 0, 0.40); --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.55), 0 28px 70px rgba(0, 0, 0, 0.45); /* character tokens */ --radius-s: 12px; --radius-m: 16px; --radius-l: 20px; --radius-xl: 24px; --radius-pill: 999px; --font-ui: 'Nunito', 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif; --font-display: 'Nunito', 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif; --space-l: 18px; --space-xl: 22px; --space-xxl: 26px; } /* ============================================================ Candy Pop — structural personality ============================================================ */ /* Cards: borderless, floating on soft pink-tinted always-on shadows */ [data-theme-name="candy"] .section-card, [data-theme-name="candy"] .list-card, [data-theme-name="candy"] .tile-card { border-color: transparent; box-shadow: 0 2px 6px rgba(236, 95, 168, 0.08), 0 8px 24px rgba(173, 122, 187, 0.14); } [data-theme="dark"][data-theme-name="candy"] .section-card, [data-theme="dark"][data-theme-name="candy"] .list-card, [data-theme="dark"][data-theme-name="candy"] .tile-card { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.30); } /* Hover: lift higher; the bigger shadow comes from --shadow-raise */ [data-theme-name="candy"] .list-card:hover, [data-theme-name="candy"] .tile-card:hover { transform: translateY(-4px); border-color: transparent; } /* Buttons: fully pill, chunky friendly labels */ [data-theme-name="candy"] .btn, [data-theme-name="candy"] .btn-blue, [data-theme-name="candy"] .btn-white, [data-theme-name="candy"] .btn-ghost, [data-theme-name="candy"] .btn-action, [data-theme-name="candy"] .btn-danger { border-radius: 999px; } [data-theme-name="candy"] .btn { font-weight: 700; } [data-theme-name="candy"] .btn-blue:hover:not(:disabled) { box-shadow: 0 4px 14px rgba(236, 95, 168, 0.35); } /* Pills: candy chips */ [data-theme-name="candy"] .pill { border-radius: var(--radius-pill); border-color: transparent; font-weight: 700; } /* Segmented control: pill track, pill thumb */ [data-theme-name="candy"] .segmented { border-radius: 999px; } [data-theme-name="candy"] .segmented button { border-radius: 999px; } [data-theme-name="candy"] .segmented button.active { box-shadow: 0 2px 8px rgba(236, 95, 168, 0.18); } /* Display type: Nunito extra-chunky */ [data-theme-name="candy"] .page-title { font-weight: 800; letter-spacing: -0.01em; } [data-theme-name="candy"] .page-title.ruled::after { border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-secondary)); } [data-theme-name="candy"] .intro-title { font-weight: 800; } [data-theme-name="candy"] .card-title { font-weight: 700; } [data-theme-name="candy"] .brand-mark { font-weight: 800; letter-spacing: -0.02em; } [data-theme-name="candy"] .meta-label { letter-spacing: 0.08em; } /* Sidebar nav: rounded rows, soft-fill active state, no left rule */ [data-theme-name="candy"] .side-item { border-radius: 14px; } [data-theme-name="candy"] .side-item:hover { border-left-color: transparent; } [data-theme-name="candy"] .side-item.active { border-left-color: transparent; background: var(--accent-soft); font-weight: 700; } /* Mobile tabs: colour marks the active tab, not a rule */ [data-theme-name="candy"] .tab-item.active { border-top-color: transparent; color: var(--accent); } /* Nav chrome: borderless, floating on shadow */ [data-theme-name="candy"] .app-sidebar { border-right-color: transparent; box-shadow: 4px 0 24px rgba(173, 122, 187, 0.10); } [data-theme="dark"][data-theme-name="candy"] .app-sidebar { box-shadow: 4px 0 24px rgba(0, 0, 0, 0.40); } [data-theme-name="candy"] .tab-bar { border-top-color: transparent; box-shadow: 0 -4px 20px rgba(173, 122, 187, 0.15); } [data-theme="dark"][data-theme-name="candy"] .tab-bar { box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.45); } /* Overlays: borderless, extra-round */ [data-theme-name="candy"] .modal-card { border-color: transparent; border-radius: var(--radius-xl); } [data-theme-name="candy"] .action-sheet { border-color: transparent; } /* Inputs and chat: soft rounded */ [data-theme-name="candy"] .entry-filled { border-radius: var(--radius-m); } [data-theme-name="candy"] .chat-bubble { border-radius: 18px; } [data-theme-name="candy"] .chat-bubble-mine { border-bottom-right-radius: 6px; } [data-theme-name="candy"] .chat-bubble-theirs { border-bottom-left-radius: 6px; } /* Round the rest of the sweets */ [data-theme-name="candy"] .avatar { border-radius: 50%; } [data-theme-name="candy"] .empty-state-icon { border-radius: 50%; } [data-theme-name="candy"] .side-badge, [data-theme-name="candy"] .tab-badge { border-radius: 999px; } /* ============================================================ THEME: Terminal — builder/hacker console Phosphor green on near-black; paper-terminal in light mode. Density + precision; a tool, not a toy. ============================================================ */ /* ---------- LIGHT: paper terminal ---------- */ [data-theme="light"][data-theme-name="terminal"] { --accent: #256e3f; --accent-hover: #1d5a33; --accent-text: #f6f8f2; --accent-soft: rgba(37, 110, 63, 0.10); --accent-soft-border: rgba(37, 110, 63, 0.32); --accent-secondary: #a16207; --page-bg: #f4f2ea; --page-dots: rgba(28, 33, 26, 0.05); --text: #1c211a; --text-secondary: #55604f; --text-disabled: #9aa294; --card-bg: #fbfaf3; --card-stroke: #d9d6c8; --card-stroke-hover: #256e3f; --surface-alt: #edeadf; --divider: #e2dfd2; --nav-bg: #efede2; --nav-border: #d9d6c8; --nav-selected: #1d5a33; --nav-unselected: #6a7364; --pill-bg: rgba(37, 110, 63, 0.06); --pill-text: #2c5e3d; --dislike-red: #b3261e; --dislike-red-soft: rgba(179, 38, 30, 0.10); --interested-green: #256e3f; --interested-green-soft: rgba(37, 110, 63, 0.12); --entry-bg: #fbfaf3; --entry-border: #c9c6b6; --entry-placeholder: #878f7d; --input-focus-ring: rgba(37, 110, 63, 0.25); --chat-bubble-theirs: #eceadd; --chat-bubble-mine: #256e3f; --chat-bubble-mine-text: #f2f6ec; --chat-input-bg: #fbfaf3; --chat-input-border: #c9c6b6; --button-disabled-bg: #e4e1d3; --button-disabled-text: #9aa294; --segment-bg: #eae7da; --segment-stroke: #d9d6c8; --overlay-bg: #fdfcf6; --panel-header-bg: #efede2; --panel-stroke: #d9d6c8; --skeleton-block: #e4e1d3; --empty-icon-bg: #eae7da; --spinner: #256e3f; --back-button-text: #55604f; --shadow-raise: 0 0 0 1px rgba(37, 110, 63, 0.18); --shadow-overlay: 0 0 0 1px rgba(28, 33, 26, 0.08), 0 20px 40px rgba(28, 33, 26, 0.18); /* character */ --radius-s: 0; --radius-m: 0; --radius-l: 0; --radius-xl: 2px; --surface-border-width: 1px; --font-ui: 'IBM Plex Mono', Consolas, 'Courier New', monospace; --font-display: 'IBM Plex Mono', Consolas, 'Courier New', monospace; --font-mono: 'IBM Plex Mono', Consolas, 'Courier New', monospace; --space-xs: 3px; --space-s: 7px; --space-m: 10px; --space-l: 14px; --space-xl: 17px; --space-xxl: 20px; --space-xxxl: 27px; --font-display-size: 28px; --font-title: 19px; --font-heading: 16px; --font-body: 13px; --font-caption: 12px; --font-small: 11px; } /* ---------- DARK (primary): phosphor console ---------- */ [data-theme="dark"][data-theme-name="terminal"] { --accent: #4ade80; --accent-hover: #6ee7a0; --accent-text: #06230f; --accent-soft: rgba(74, 222, 128, 0.12); --accent-soft-border: rgba(74, 222, 128, 0.35); --accent-secondary: #fbbf24; --page-bg: #0b0f0c; --page-dots: rgba(74, 222, 128, 0.05); --text: #d7e4d3; --text-secondary: #8fa38a; --text-disabled: #5a6656; --card-bg: #10160f; --card-stroke: #223321; --card-stroke-hover: #4ade80; --surface-alt: #151c14; --divider: #1d2a1c; --nav-bg: #0d120c; --nav-border: #223321; --nav-selected: #4ade80; --nav-unselected: #7d8f78; --pill-bg: rgba(74, 222, 128, 0.07); --pill-text: #9fdcab; --dislike-red: #ff6b6b; --dislike-red-soft: rgba(255, 107, 107, 0.14); --interested-green: #4ade80; --interested-green-soft: rgba(74, 222, 128, 0.14); --entry-bg: #0e140d; --entry-border: #2a3d28; --entry-placeholder: #6b7d66; --input-focus-ring: rgba(74, 222, 128, 0.30); --chat-bubble-theirs: #162014; --chat-bubble-mine: #1c3a25; --chat-bubble-mine-text: #d9f2dd; --chat-input-bg: #0e140d; --chat-input-border: #2a3d28; --button-disabled-bg: #1a231a; --button-disabled-text: #5a6656; --segment-bg: #0e140d; --segment-stroke: #223321; --overlay-bg: #121a11; --panel-header-bg: #0d120c; --panel-stroke: #223321; --skeleton-block: #1a241a; --empty-icon-bg: #162014; --spinner: #4ade80; --back-button-text: #8fa38a; --shadow-raise: 0 0 0 1px rgba(74, 222, 128, 0.20), 0 0 16px rgba(74, 222, 128, 0.08); --shadow-overlay: 0 0 0 1px rgba(74, 222, 128, 0.18), 0 24px 48px rgba(0, 0, 0, 0.60); /* character */ --radius-s: 0; --radius-m: 0; --radius-l: 0; --radius-xl: 2px; --surface-border-width: 1px; --font-ui: 'IBM Plex Mono', Consolas, 'Courier New', monospace; --font-display: 'IBM Plex Mono', Consolas, 'Courier New', monospace; --font-mono: 'IBM Plex Mono', Consolas, 'Courier New', monospace; --space-xs: 3px; --space-s: 7px; --space-m: 10px; --space-l: 14px; --space-xl: 17px; --space-xxl: 20px; --space-xxxl: 27px; --font-display-size: 28px; --font-title: 19px; --font-heading: 16px; --font-body: 13px; --font-caption: 12px; --font-small: 11px; } /* ============================================================ STRUCTURE ============================================================ */ /* Scanlines instead of dot grid — subtle horizontal raster */ [data-theme-name="terminal"] body { background-image: repeating-linear-gradient( 0deg, var(--page-dots) 0px, var(--page-dots) 1px, transparent 1px, transparent 4px ); background-size: auto; } /* Prompt marker on page titles — static, no blink */ [data-theme-name="terminal"] .page-title::before { content: "> "; color: var(--accent); } /* Ruled titles: full-width dashed hairline instead of the 34x4 block */ [data-theme-name="terminal"] .page-title.ruled::after { width: 100%; height: 1px; border-radius: 0; background: repeating-linear-gradient( 90deg, var(--accent) 0, var(--accent) 6px, transparent 6px, transparent 11px ); } /* Headings read like directives */ [data-theme-name="terminal"] .card-title, [data-theme-name="terminal"] .section-header { text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; } [data-theme-name="terminal"] .meta-label { letter-spacing: 0.08em; } /* Brand as a path in the prompt */ [data-theme-name="terminal"] .brand-mark { color: var(--accent); text-transform: lowercase; letter-spacing: 0.04em; } /* Pills: bare stroked tokens, no fill */ [data-theme-name="terminal"] .pill { background: transparent; border: 1px solid var(--accent-soft-border); color: var(--pill-text); } /* Cards: no lift on hover — border snaps to accent instead */ [data-theme-name="terminal"] .list-card:hover, [data-theme-name="terminal"] .tile-card:hover { transform: none; border-color: var(--accent); } /* Square hardware: avatars and empty states */ [data-theme-name="terminal"] .avatar { border-radius: var(--radius-xl); } [data-theme-name="terminal"] .empty-state-icon { border-radius: var(--radius-xl); border: 1px dashed var(--card-stroke); } /* Dashed rules between sections */ [data-theme-name="terminal"] .divider { background: repeating-linear-gradient( 90deg, var(--divider) 0, var(--divider) 5px, transparent 5px, transparent 9px ); } /* Segmented control: square tabs */ [data-theme-name="terminal"] .segmented { border-radius: 0; border: 1px solid var(--segment-stroke); } [data-theme-name="terminal"] .segmented button { border-radius: 0; text-transform: uppercase; letter-spacing: 0.04em; } [data-theme-name="terminal"] .segmented button.active { border-radius: 0; background: var(--accent-soft); color: var(--accent); box-shadow: none; } /* Chat: crisp near-square bubbles, theirs gets a hairline */ [data-theme-name="terminal"] .chat-bubble { border-radius: var(--radius-xl); } [data-theme-name="terminal"] .chat-bubble-theirs { border: 1px solid var(--divider); } /* Overlays framed with a hard 1px panel stroke */ [data-theme-name="terminal"] .modal-card, [data-theme-name="terminal"] .action-sheet { border: 1px solid var(--panel-stroke); } /* Crisp tab bar — no frosted glass */ [data-theme-name="terminal"] .tab-bar { backdrop-filter: none; } /* Badges: square counters */ [data-theme-name="terminal"] .side-badge, [data-theme-name="terminal"] .tab-badge { border-radius: var(--radius-xl); font-family: var(--font-mono); } /* Dark only: faint phosphor bloom on the primary action */ [data-theme="dark"][data-theme-name="terminal"] .btn-blue { box-shadow: 0 0 10px rgba(74, 222, 128, 0.18); } [data-theme="dark"][data-theme-name="terminal"] .btn-blue:hover:not(:disabled) { box-shadow: 0 0 14px rgba(74, 222, 128, 0.30); } /* ============================================================ Slate Pro — compact enterprise workspace Cool desaturated slate, steel-indigo accent, dense rows. ============================================================ */ [data-theme="light"][data-theme-name="slate"] { /* colour tokens */ --accent: #4f63d2; --accent-hover: #4356bd; --accent-text: #ffffff; --accent-soft: rgba(79, 99, 210, 0.09); --accent-soft-border: rgba(79, 99, 210, 0.30); --accent-secondary: #7d68c9; --page-bg: #f3f4f6; --page-dots: rgba(31, 36, 44, 0.05); --text: #1f242c; --text-secondary: #5c6470; --text-disabled: #9aa1ac; --card-bg: #ffffff; --card-stroke: #dfe3e8; --card-stroke-hover: #c4cbd5; --surface-alt: #f7f8fa; --divider: #e7eaee; --nav-bg: #fafbfc; --nav-border: #e3e6eb; --nav-selected: #1f242c; --nav-unselected: #6b7280; --pill-bg: #eef0f3; --pill-text: #4b5563; --dislike-red: #cf4444; --dislike-red-soft: rgba(207, 68, 68, 0.10); --interested-green: #2f9e63; --interested-green-soft: rgba(47, 158, 99, 0.10); --entry-bg: #ffffff; --entry-border: #d6dbe2; --entry-placeholder: #9aa1ac; --input-focus-ring: rgba(79, 99, 210, 0.25); --chat-bubble-theirs: #edeff2; --chat-bubble-mine: #4f63d2; --chat-bubble-mine-text: #ffffff; --chat-input-bg: #ffffff; --chat-input-border: #d6dbe2; --button-disabled-bg: #e5e8ec; --button-disabled-text: #a0a6b0; --segment-bg: #e9ebef; --segment-stroke: #dcdfe5; --overlay-bg: #ffffff; --panel-header-bg: #f7f8fa; --panel-stroke: #e2e5ea; --skeleton-block: #e6e9ed; --empty-icon-bg: #eef0f3; --spinner: #4f63d2; --back-button-text: #5c6470; --shadow-raise: 0 1px 2px rgba(15, 18, 25, 0.06), 0 1px 3px rgba(15, 18, 25, 0.05); --shadow-overlay: 0 8px 24px rgba(15, 18, 25, 0.13), 0 2px 6px rgba(15, 18, 25, 0.07); /* character tokens */ --radius-s: 3px; --radius-m: 4px; --radius-l: 6px; --radius-xl: 8px; --surface-border-width: 1px; --font-ui: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif; --font-display: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', Consolas, monospace; --space-xs: 3px; --space-s: 6px; --space-m: 10px; --space-l: 13px; --space-xl: 16px; --space-xxl: 19px; --space-xxxl: 26px; --font-display-size: 26px; --font-title: 18px; --font-heading: 15px; --font-body: 13px; --font-caption: 11.5px; --font-small: 11px; } [data-theme="dark"][data-theme-name="slate"] { /* colour tokens */ --accent: #8fa0e8; --accent-hover: #a3b2ef; --accent-text: #171a21; --accent-soft: rgba(143, 160, 232, 0.13); --accent-soft-border: rgba(143, 160, 232, 0.32); --accent-secondary: #a795e3; --page-bg: #16181d; --page-dots: rgba(232, 234, 238, 0.045); --text: #e8eaee; --text-secondary: #9aa3b0; --text-disabled: #5d646f; --card-bg: #1d2026; --card-stroke: #2a2e36; --card-stroke-hover: #3a404b; --surface-alt: #23262d; --divider: #272b32; --nav-bg: #1a1d22; --nav-border: #262a31; --nav-selected: #e8eaee; --nav-unselected: #8b93a0; --pill-bg: #262a31; --pill-text: #aeb6c2; --dislike-red: #e05d5d; --dislike-red-soft: rgba(224, 93, 93, 0.14); --interested-green: #4cba7c; --interested-green-soft: rgba(76, 186, 124, 0.14); --entry-bg: #1a1d22; --entry-border: #31363f; --entry-placeholder: #6a7280; --input-focus-ring: rgba(143, 160, 232, 0.28); --chat-bubble-theirs: #262a31; --chat-bubble-mine: #3f4e9c; --chat-bubble-mine-text: #eceffc; --chat-input-bg: #1a1d22; --chat-input-border: #31363f; --button-disabled-bg: #262a31; --button-disabled-text: #5d646f; --segment-bg: #141619; --segment-stroke: #262a31; --overlay-bg: #23262d; --panel-header-bg: #1a1d22; --panel-stroke: #31363f; --skeleton-block: #262a31; --empty-icon-bg: #23262d; --spinner: #8fa0e8; --back-button-text: #9aa3b0; --shadow-raise: 0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.22); --shadow-overlay: 0 10px 28px rgba(0, 0, 0, 0.50), 0 2px 8px rgba(0, 0, 0, 0.35); /* character tokens */ --radius-s: 3px; --radius-m: 4px; --radius-l: 6px; --radius-xl: 8px; --surface-border-width: 1px; --font-ui: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif; --font-display: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', Consolas, monospace; --space-xs: 3px; --space-s: 6px; --space-m: 10px; --space-l: 13px; --space-xl: 16px; --space-xxl: 19px; --space-xxxl: 26px; --font-display-size: 26px; --font-title: 18px; --font-heading: 15px; --font-body: 13px; --font-caption: 11.5px; --font-small: 11px; } /* ============================================================ Structural rules — density and corporate crispness ============================================================ */ [data-theme-name="slate"] body { -webkit-font-smoothing: antialiased; } /* Titles: tight tracking, no decorative rule */ [data-theme-name="slate"] .page-title { letter-spacing: -0.015em; } [data-theme-name="slate"] .page-title.ruled::after { width: 0; height: 0; } [data-theme-name="slate"] .brand-mark { font-weight: 600; letter-spacing: -0.01em; } [data-theme-name="slate"] .card-title { font-weight: 600; letter-spacing: -0.005em; } /* Mono eyebrows: smaller, quieter */ [data-theme-name="slate"] .meta-label { font-size: var(--font-small); letter-spacing: 0.07em; } [data-theme-name="slate"] .intro-subtitle { font-size: var(--font-small); letter-spacing: 0.07em; } /* Buttons: compact, medium weight */ [data-theme-name="slate"] .btn { font-size: 13px; font-weight: 500; letter-spacing: 0.005em; } [data-theme-name="slate"] .btn-action { font-size: 12px; } /* Pills: small dense chips */ [data-theme-name="slate"] .pill { font-size: 11px; font-weight: 500; letter-spacing: 0.015em; padding: 2px 8px; } /* Cards: reduced hover lift (shadow already minimal via token) */ [data-theme-name="slate"] .list-card:hover, [data-theme-name="slate"] .tile-card:hover { transform: translateY(-1px); } /* Sidebar: dense nav rows */ [data-theme-name="slate"] .side-item { padding: 8px 10px; font-size: 13px; } [data-theme-name="slate"] .side-item:hover { background: var(--surface-alt); } [data-theme-name="slate"] .side-item.active { background: var(--accent-soft); font-weight: 600; } /* Segmented control: compact */ [data-theme-name="slate"] .segmented button { font-size: 12.5px; } [data-theme-name="slate"] .segmented button.active { font-weight: 600; } /* Chat: crisp even-radius bubbles */ [data-theme-name="slate"] .chat-bubble { border-radius: 8px; font-size: 13px; } /* Rounded-square identity language (Linear/Notion adjacent) */ [data-theme-name="slate"] .avatar { border-radius: 28%; } [data-theme-name="slate"] .empty-state-icon { border-radius: var(--radius-l); } /* Overlays: hairline-defined, shadow stays quiet */ [data-theme-name="slate"] .modal-card, [data-theme-name="slate"] .action-sheet { border: 1px solid var(--panel-stroke); } /* Badges: small and firm */ [data-theme-name="slate"] .side-badge, [data-theme-name="slate"] .tab-badge { font-size: 11px; font-weight: 600; } /* ============================================================ HORIZON — airy modern SaaS, dawn gradient (teal -> indigo) ============================================================ */ /* ---------- LIGHT: warm porcelain ground, white floating cards ---------- */ [data-theme="light"][data-theme-name="horizon"] { --accent: #4f46e5; --accent-hover: #4338ca; --accent-text: #ffffff; --accent-soft: #eceafc; --accent-soft-border: #d8d5f8; --accent-secondary: #14b8a6; --page-bg: #faf9f7; --page-dots: rgba(79, 70, 229, 0.07); --text: #1c1a27; --text-secondary: #5f5c6e; --text-disabled: #a3a0b0; --card-bg: #ffffff; --card-stroke: transparent; --card-stroke-hover: rgba(79, 70, 229, 0.28); --surface-alt: #f4f2ee; --divider: #ece9e3; --nav-bg: rgba(255, 255, 255, 0.92); --nav-border: #eceae4; --nav-selected: #4f46e5; --nav-unselected: #6f6d7d; --pill-bg: #e6f5f1; --pill-text: #0e7268; --dislike-red: #e11d48; --dislike-red-soft: #fdeaef; --interested-green: #16a34a; --interested-green-soft: #e6f7ec; --entry-bg: #ffffff; --entry-border: #e4e1da; --entry-placeholder: #9d9aab; --input-focus-ring: rgba(79, 70, 229, 0.22); --chat-bubble-theirs: #f1efe9; --chat-bubble-mine: #4f46e5; --chat-bubble-mine-text: #ffffff; --chat-input-bg: #ffffff; --chat-input-border: #e4e1da; --button-disabled-bg: #eceae5; --button-disabled-text: #a29fae; --segment-bg: #f0eee9; --segment-stroke: #e6e3dc; --overlay-bg: #ffffff; --panel-header-bg: #f8f7f3; --panel-stroke: #eae7e0; --skeleton-block: #eeece7; --empty-icon-bg: #edeffc; --spinner: #4f46e5; --back-button-text: #5c5a6b; --shadow-raise: 0 2px 6px rgba(30, 27, 60, 0.06), 0 14px 32px rgba(30, 27, 60, 0.10); --shadow-overlay: 0 8px 24px rgba(30, 27, 60, 0.10), 0 28px 72px rgba(30, 27, 60, 0.16); /* character: generous radii + 1.25x air on the big steps */ --radius-s: 10px; --radius-m: 14px; --radius-l: 18px; --radius-xl: 22px; --space-l: 20px; --space-xl: 25px; --space-xxl: 30px; --space-xxxl: 40px; } /* ---------- DARK: teal-black ground, slate-teal cards, lifted indigo ---------- */ [data-theme="dark"][data-theme-name="horizon"] { --accent: #8b93ff; --accent-hover: #a2a9ff; --accent-text: #0f1420; --accent-soft: rgba(139, 147, 255, 0.15); --accent-soft-border: rgba(139, 147, 255, 0.34); --accent-secondary: #2dd4bf; --page-bg: #101b1e; --page-dots: rgba(45, 212, 191, 0.07); --text: #edf3f2; --text-secondary: #9fb1af; --text-disabled: #5d706e; --card-bg: #18262b; --card-stroke: transparent; --card-stroke-hover: rgba(139, 147, 255, 0.35); --surface-alt: #1e2e34; --divider: #24343a; --nav-bg: rgba(19, 30, 34, 0.92); --nav-border: #223238; --nav-selected: #8b93ff; --nav-unselected: #7f9694; --pill-bg: rgba(45, 212, 191, 0.13); --pill-text: #67dcc9; --dislike-red: #fb7185; --dislike-red-soft: rgba(251, 113, 133, 0.14); --interested-green: #4ade80; --interested-green-soft: rgba(74, 222, 128, 0.13); --entry-bg: #142126; --entry-border: #2b3c42; --entry-placeholder: #6d8280; --input-focus-ring: rgba(139, 147, 255, 0.30); --chat-bubble-theirs: #1e2f35; --chat-bubble-mine: #4f46e5; --chat-bubble-mine-text: #ffffff; --chat-input-bg: #142126; --chat-input-border: #2b3c42; --button-disabled-bg: #1d2b30; --button-disabled-text: #5d7472; --segment-bg: #142024; --segment-stroke: #263639; --overlay-bg: #1b2b31; --panel-header-bg: #16242a; --panel-stroke: #27393f; --skeleton-block: #203035; --empty-icon-bg: rgba(139, 147, 255, 0.12); --spinner: #8b93ff; --back-button-text: #9fb1af; --shadow-raise: 0 2px 6px rgba(0, 0, 0, 0.35), 0 16px 36px rgba(0, 0, 0, 0.45); --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.50), 0 32px 80px rgba(0, 0, 0, 0.55); --radius-s: 10px; --radius-m: 14px; --radius-l: 18px; --radius-xl: 22px; --space-l: 20px; --space-xl: 25px; --space-xxl: 30px; --space-xxxl: 40px; } /* ============================================================ STRUCTURE — air + gradient personality ============================================================ */ /* Display type: Plex Sans, heavy, tight tracking */ [data-theme-name="horizon"] .page-title, [data-theme-name="horizon"] .intro-title, [data-theme-name="horizon"] .card-title, [data-theme-name="horizon"] .brand-mark { font-weight: 700; letter-spacing: -0.02em; } /* Dawn-gradient title rule */ [data-theme-name="horizon"] .page-title.ruled::after { width: 44px; height: 4px; border-radius: 999px; background: linear-gradient(90deg, #0d9488, #4f46e5); } [data-theme="dark"][data-theme-name="horizon"] .page-title.ruled::after { background: linear-gradient(90deg, #2dd4bf, #8b93ff); } /* Gradient wordmark */ [data-theme-name="horizon"] .brand-mark { background: linear-gradient(115deg, #0d9488 10%, #4f46e5 85%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } [data-theme="dark"][data-theme-name="horizon"] .brand-mark { background: linear-gradient(115deg, #2dd4bf 10%, #8b93ff 85%); -webkit-background-clip: text; background-clip: text; } /* Borderless floating cards on layered soft shadows */ [data-theme-name="horizon"] .section-card, [data-theme-name="horizon"] .list-card, [data-theme-name="horizon"] .tile-card { border-color: transparent; box-shadow: 0 1px 2px rgba(30, 27, 60, 0.04), 0 8px 24px rgba(30, 27, 60, 0.07); } [data-theme="dark"][data-theme-name="horizon"] .section-card, [data-theme="dark"][data-theme-name="horizon"] .list-card, [data-theme="dark"][data-theme-name="horizon"] .tile-card { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.40); } [data-theme-name="horizon"] .list-card:hover, [data-theme-name="horizon"] .tile-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-raise); } /* Buttons: gradient primary, pill-shaped quick actions */ [data-theme-name="horizon"] .btn { font-weight: 600; } [data-theme-name="horizon"] .btn-blue { background: linear-gradient(135deg, #0d9488, #4f46e5); color: var(--accent-text); border-color: transparent; } [data-theme-name="horizon"] .btn-blue:hover:not(:disabled) { background: linear-gradient(135deg, #16a99b, #6059f2); box-shadow: 0 4px 14px rgba(79, 70, 229, 0.28); } [data-theme="dark"][data-theme-name="horizon"] .btn-blue { background: linear-gradient(135deg, #2dd4bf, #8b93ff); } [data-theme="dark"][data-theme-name="horizon"] .btn-blue:hover:not(:disabled) { background: linear-gradient(135deg, #49e2cd, #a3aaff); box-shadow: 0 4px 16px rgba(139, 147, 255, 0.30); } [data-theme-name="horizon"] .btn-action { border-radius: 999px; } /* Fully-round chips and segmented control */ [data-theme-name="horizon"] .pill { border-radius: 999px; } [data-theme-name="horizon"] .segmented { border-radius: 999px; } [data-theme-name="horizon"] .segmented button { border-radius: 999px; } [data-theme-name="horizon"] .segmented button.active { box-shadow: 0 2px 10px rgba(30, 27, 60, 0.10); } [data-theme="dark"][data-theme-name="horizon"] .segmented button.active { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.40); } /* Mono eyebrows lean teal (the second dawn tone) */ [data-theme-name="horizon"] .meta-label, [data-theme-name="horizon"] .intro-subtitle { color: #0f766e; letter-spacing: 0.08em; } [data-theme="dark"][data-theme-name="horizon"] .meta-label, [data-theme="dark"][data-theme-name="horizon"] .intro-subtitle { color: #45d0be; } /* Chat: my bubbles carry the dawn gradient */ [data-theme-name="horizon"] .chat-bubble-mine { background: linear-gradient(135deg, #0d9488, #4f46e5); border-bottom-right-radius: 6px; } [data-theme-name="horizon"] .chat-bubble-theirs { border-bottom-left-radius: 6px; } /* Rounder identity + empty states */ [data-theme-name="horizon"] .avatar { border-radius: 50%; } [data-theme-name="horizon"] .empty-state-icon { border-radius: 50%; } /* Nav: soft glassy chrome */ [data-theme-name="horizon"] .app-sidebar { box-shadow: 0 0 24px rgba(30, 27, 60, 0.04); } [data-theme-name="horizon"] .tab-bar { -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15); } [data-theme-name="horizon"] .side-item.active { font-weight: 600; } /* Overlay surfaces: extra-generous radius, borderless */ [data-theme-name="horizon"] .modal-card, [data-theme-name="horizon"] .action-sheet { border-radius: var(--radius-xl); border-color: transparent; }