giscus-light.css

/* Custom Giscus Light Theme - matches yashgarg.dev cherry scheme */

/* Custom fonts */
@font-face {
    font-family: 'Literata';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('https://yashgarg.dev/fonts/Literata.ttf') format('truetype');
}

@font-face {
    font-family: 'Noto Serif';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('https://yashgarg.dev/fonts/NotoSerif.ttf') format('truetype');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://yashgarg.dev/fonts/IBMPlexMono.ttf') format('truetype');
}

/* Main theme variables - cherry light mode */
main {
    /* Primary: Rose #e11d48 = 225, 29, 72 */
    --primary-default: 225, 29, 72;
    /* Background: white/light gray */
    --bg-default: 255, 255, 255;

    /* Syntax highlighting - GitHub light style (matching your syntax.css light mode) */
    --color-prettylights-syntax-comment: #6e7781;
    --color-prettylights-syntax-constant: #0550ae;
    --color-prettylights-syntax-entity: #8250df;
    --color-prettylights-syntax-storage-modifier-import: #24292f;
    --color-prettylights-syntax-entity-tag: #116329;
    --color-prettylights-syntax-keyword: #cf222e;
    --color-prettylights-syntax-string: #0a3069;
    --color-prettylights-syntax-variable: #953800;
    --color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
    --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
    --color-prettylights-syntax-invalid-illegal-bg: #82071e;
    --color-prettylights-syntax-carriage-return-text: #f6f8fa;
    --color-prettylights-syntax-carriage-return-bg: #cf222e;
    --color-prettylights-syntax-string-regexp: #116329;
    --color-prettylights-syntax-markup-list: #3b2300;
    --color-prettylights-syntax-markup-heading: #0550ae;
    --color-prettylights-syntax-markup-italic: #24292f;
    --color-prettylights-syntax-markup-bold: #24292f;
    --color-prettylights-syntax-markup-deleted-text: #82071e;
    --color-prettylights-syntax-markup-deleted-bg: #ffebe9;
    --color-prettylights-syntax-markup-inserted-text: #116329;
    --color-prettylights-syntax-markup-inserted-bg: #dafbe1;
    --color-prettylights-syntax-markup-changed-text: #953800;
    --color-prettylights-syntax-markup-changed-bg: #ffd8b5;
    --color-prettylights-syntax-markup-ignored-text: #eaeef2;
    --color-prettylights-syntax-markup-ignored-bg: #0550ae;
    --color-prettylights-syntax-meta-diff-range: #8250df;
    --color-prettylights-syntax-brackethighlighter-angle: #57606a;
    --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
    --color-prettylights-syntax-constant-other-reference-link: #0a3069;

    /* Button styles */
    --color-btn-text: #24292f;
    --color-btn-bg: #f6f8fa;
    --color-btn-border: #d0d7de;
    --color-btn-shadow: 0 1px 0 rgba(31, 35, 40, 0.04);
    --color-btn-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
    --color-btn-hover-bg: #f3f4f6;
    --color-btn-hover-border: #c9d1d9;
    --color-btn-active-bg: rgba(var(--primary-default), 0.1);
    --color-btn-active-border: rgba(var(--primary-default), 1);
    --color-btn-selected-bg: rgba(var(--primary-default), 0.08);

    /* Primary button (rose accent) */
    --color-btn-primary-text: #fff;
    --color-btn-primary-bg: rgba(var(--primary-default), 1);
    --color-btn-primary-border: rgba(var(--primary-default), 1);
    --color-btn-primary-shadow: 0 1px 0 rgba(31, 35, 40, 0.1);
    --color-btn-primary-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --color-btn-primary-hover-bg: rgba(var(--primary-default), 0.9);
    --color-btn-primary-hover-border: rgba(var(--primary-default), 0.9);
    --color-btn-primary-selected-bg: rgba(var(--primary-default), 1);
    --color-btn-primary-selected-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2);
    --color-btn-primary-disabled-text: rgba(255, 255, 255, 0.8);
    --color-btn-primary-disabled-bg: rgba(var(--primary-default), 0.5);
    --color-btn-primary-disabled-border: rgba(var(--primary-default), 0.5);

    /* UI colors */
    --color-action-list-item-default-hover-bg: rgba(208, 215, 222, 0.32);
    --color-segmented-control-bg: #eaeef2;
    --color-segmented-control-button-bg: #fff;
    --color-segmented-control-button-selected-border: #d0d7de;

    /* Foreground colors */
    --color-fg-default: #24292f;
    --color-fg-muted: rgba(36, 41, 47, 0.75);
    --color-fg-subtle: rgba(36, 41, 47, 0.5);

    /* Canvas/background colors */
    --color-canvas-default: #fff;
    --color-canvas-overlay: #fff;
    --color-canvas-inset: #f6f8fa;
    --color-canvas-subtle: #f6f8fa;

    /* Border colors */
    --color-border-default: #d0d7de;
    --color-border-muted: rgba(175, 184, 193, 0.2);

    /* Neutral */
    --color-neutral-muted: rgba(175, 184, 193, 0.2);

    /* Accent (rose primary) */
    --color-accent-fg: rgba(var(--primary-default), 1);
    --color-accent-emphasis: rgba(var(--primary-default), 1);
    --color-accent-muted: rgba(var(--primary-default), 0.4);
    --color-accent-subtle: rgba(var(--primary-default), 0.1);

    /* Status colors */
    --color-success-fg: #1a7f37;
    --color-attention-fg: #9a6700;
    --color-attention-muted: rgba(212, 167, 44, 0.4);
    --color-attention-subtle: #fff8c5;
    --color-danger-fg: #d1242f;
    --color-danger-muted: rgba(255, 129, 130, 0.4);
    --color-danger-subtle: #ffebe9;

    /* Shadow */
    --color-primer-shadow-inset: 0 1px 0 rgba(208, 215, 222, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.25);

    /* Scale colors */
    --color-scale-gray-1: #eaeef2;
    --color-scale-blue-1: rgba(var(--primary-default), 0.1);

    /* Social reaction */
    --color-social-reaction-bg-hover: var(--color-scale-gray-1);
    --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-1);
}

/* Loading indicators */
main .pagination-loader-container {
    background-image: url(https://github.com/images/modules/pulls/progressive-disclosure-line.svg);
}

main .gsc-loading-image {
    background-image: url(https://github.githubassets.com/images/mona-loading-default.gif);
}

/* Typography overrides */
body,
.gsc-comment-content,
.gsc-textarea,
.gsc-comment-author,
.gsc-reply-author {
    font-family: 'Literata', Georgia, serif !important;
    font-size: 17px !important;
    line-height: 1.7 !important;
}

/* Headings */
.gsc-comment-header,
h1, h2, h3, h4, h5, h6 {
    font-family: 'Noto Serif', Georgia, serif !important;
    font-weight: 600 !important;
}

/* Code */
code,
pre,
.gsc-comment-content code,
.gsc-comment-content pre {
    font-family: 'IBM Plex Mono', 'Courier New', monospace !important;
    font-size: 0.9em !important;
}

/* Code blocks */
pre {
    background-color: #f6f8fa !important;
    color: #24292f !important;
    padding: 1rem !important;
    border-radius: 0.375rem !important;
}

/* Link styling - wavy underlines */
a {
    text-decoration-style: wavy !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 2px !important;
    color: rgba(var(--primary-default), 1) !important;
}

a:hover {
    color: rgba(var(--primary-default), 0.8) !important;
}

.gsc-main {
    border: none !important;
}

.gsc-comment:not(.gsc-reply-box) .gsc-replies {
    border-radius: unset;
}