/* The layer order is restated in every SDK stylesheet, because the first declaration the browser sees is
   the one that counts and stylesheet load order varies by page. Consumer CSS stays unlayered and so
   always wins. */
@layer rspond.reset, rspond.vendor, rspond.document, rspond.component, rspond.theme, rspond.look;

@layer rspond.theme {
    :root {

        /* Tells the browser which way to paint the widgets it draws itself -- checkbox and radio fills, select
           menus, scrollbars, date pickers, and the default background of any input that states none. Nothing else
           can reach those: they are rendered by the browser, not by the page, so a token cannot colour them and a
           background rule on the element is ignored. Without this line every one of them is painted light, which
           is why an unstyled checkbox came out bright white on a dark page. */
        color-scheme: dark;

        /* Brand */
        --rspond-brand-primary: #E8A62C;
        --rspond-brand-green: #3d8040;
        --rspond-brand-blue: #3570a3;
        --rspond-brand-gradient: linear-gradient(135deg, #264D26 0%, #336633 50%, #3D8040 100%);
        --rspond-logo-gradient: linear-gradient(to right, #1a1a1a, #2d5a2e);
        --rspond-logo-wordmark-color: #ffffff;

        /* Surfaces. Primary is the fill of a reading surface -- the nav and content islands, and the controls
            that sit flush on them; secondary is the recessed surround those islands float in. The header fill
            resolves to the surround so chrome and well are one continuous field; it stays a separate token so a
            consumer can brand the banner without touching the well. */
        --rspond-page-background-primary: #0d1117;
        --rspond-page-background-secondary: #0f1319;
        --rspond-header-background: var(--rspond-page-background-secondary);

        /* The header's and footer's own text colours, resolving here to the page's, so this theme's chrome reads
           as the rest of the page does. They are tokens of their own because the chrome's fill is: a theme or a
           consumer that paints the banner a saturated colour needs text that reads on that fill, and without
           these the only reach was a descendant selector into the header's markup. The footer's fill resolves
           to the header's, keeping chrome and well one continuous field; a theme with a decorated header gives
           the footer a plain one. */
        --rspond-header-text: var(--rspond-components-text-muted);
        --rspond-header-link-color: var(--rspond-link-color);
        --rspond-header-link-color-hover: var(--rspond-link-color-hover);
        --rspond-footer-background: var(--rspond-header-background);
        --rspond-footer-text: var(--rspond-components-text-muted);
        --rspond-card-background: #14181f;
        --rspond-card-background-hover: #191e25;

        /* Components (shared) */
        --rspond-components-text-primary: #c9d1d9;
        --rspond-components-text-heading: #a8c4e0;
        --rspond-components-text-secondary: #a0aab4;
        --rspond-components-text-muted: #808990;

        /* Dimmer than muted, because on a dark ground disabled means less light, not more. This read `lightgray`
           -- a light-theme value carried across unchanged -- which is brighter than the primary text above it, so
           every disabled control announced itself more loudly than the enabled ones around it. */
        --rspond-components-text-disabled: #5c656d;

        /* Status */
        --rspond-status-info: #58a6ff;
        --rspond-status-info-hover: #79c0ff;
        --rspond-status-info-background: rgba(88, 166, 255, 0.1);
        --rspond-status-info-border: rgba(88, 166, 255, 0.2);
        --rspond-status-success: #3fb950;
        --rspond-status-success-hover: #56d364;
        --rspond-status-success-background: rgba(63, 185, 80, 0.12);
        --rspond-status-success-border: rgba(63, 185, 80, 0.3);
        --rspond-status-warning: #f0b840;
        --rspond-status-warning-background: rgba(240, 184, 64, 0.15);
        --rspond-status-warning-border: rgba(240, 184, 64, 0.4);
        --rspond-status-danger: #f85149;
        --rspond-status-danger-hover: #ff7b72;
        --rspond-status-danger-background: rgba(248, 81, 73, 0.15);
        --rspond-status-danger-border: rgba(248, 81, 73, 0.3);

        /* Borders */
        --rspond-border-color: #30363d;
        --rspond-border-color-subtle: #313840;
        /* The hairline under card titles and between regions. Stated by this theme rather than left to the
           component fallback, because the darker ground made the fallback's brightened mix read as a rule
           rather than a hairline. */
        --rspond-line-color: #2a3038;
        --rspond-border-radius-small: 3px;
        --rspond-border-radius-medium: 4px;
        --rspond-border-radius-large: 8px;

        /* Shadows */
        --rspond-shadows-small: 0 2px 8px rgba(0, 0, 0, 0.3);
        --rspond-shadows-medium: 0 8px 24px rgba(0, 0, 0, 0.6);
        --rspond-shadows-large: 0 8px 32px rgba(0, 0, 0, 0.5);

        /* Typography */
        --rspond-fonts-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
        --rspond-fonts-family-mono: 'SF Mono', Menlo, Consolas, monospace;

        /* Focus & state */
        --rspond-components-focus-ring: 0 0 0 3px rgba(88, 166, 255, 0.15);
        /* Near-white rather than the status blue, because on a dark page a focused control should read as lit rather
           than as stained. An overlay composites toward its own colour, so a bright one lifts the luminance of
           whatever is beneath it -- including a control already filled by a look, where a saturated tint only shifts
           the hue and can be missed. The light theme's wash is a blue tint instead: there is nothing to brighten on
           a white card, so the two themes reach the same end by opposite means, which is what a token is for.

           The alpha is lower than it looks like it should be because the filter below multiplies it: a filter applies
           to everything the element renders, its own box-shadow included, so the two compound. */
        --rspond-components-focus-wash: rgba(190, 220, 255, 0.14);

        /* The wash lights the box; this lights what is written on it. A filter operates on the pixels the element
           itself paints, so on a control whose background is transparent it brightens the label and the icon and
           leaves the box alone -- exactly the half the wash cannot reach, since an inset shadow paints beneath the
           text. Together they read as a control that has come on rather than one wearing a tint.

           A token rather than a literal because the light theme must not do this at all: brightening near-black text
           on a white card walks it toward the background and costs contrast. Light states `none`, which is not the
           same as brightness(1) -- an identity filter still makes the element a containing block for positioned
           descendants and opens a stacking context, and this SDK anchors overlays inside their triggers, so a theme
           that gains nothing should pay nothing. */
        --rspond-components-focus-filter: brightness(1.25);
        --rspond-components-opacity-disabled: 0.5;

        /* Selection -- one pair for every place a component says "this one is chosen": a time in the time chooser,
           a day in the date chooser, the row a chooser holds. Not the row the keyboard is on, which is a focus
           question and takes the focus wash: a list showing both at once needs them told apart. Selection is the
           brand's own green, named rather than copied, so a chosen row and the ping in the logo are the same
           colour by construction and stay so if the brand ever moves. It is stated here in its own right rather
           than borrowed from the primary button, because a theme that wanted a distinct selection colour should
           be able to say so without repainting every button -- and because the two are no longer the same green:
           a button is an invitation and carries the palette's louder green, while a selection is a statement of
           fact about one row. A component painting a solid selected fill needs both halves -- white on this green
           is 4.8:1, which carries a label but not body text -- while one that mixes the colour down to a tint, as
           a badge does, takes the background alone. */
        --rspond-selected-background: var(--rspond-brand-green);
        --rspond-selected-text: #ffffff;

        /* Buttons */
        --rspond-button-primary-background: #238636;
        --rspond-button-primary-background-hover: #2ea043;
        --rspond-button-primary-border: #238636;
        --rspond-button-primary-text: #ffffff;
        --rspond-button-secondary-background: transparent;
        /* Its own value rather than the shared border token: a button's outline is an affordance, not a divider,
           and the divider grey read as muted enough to make the control look disabled. */
        --rspond-button-secondary-border: #414a55;
        --rspond-button-secondary-text: var(--rspond-status-success);

        /* Spacing (section-level) */
        --rspond-spacing-section: 24px;
        --rspond-spacing-card-gap: 16px;

        /* Between-item spacing scale (the magnitudes behind Spacing.Tiny .. Spacing.XLarge) */
        --rspond-space-tiny: 6px;
        --rspond-space-small: 8px;
        --rspond-space-default: 12px;
        --rspond-space-medium: 16px;
        --rspond-space-large: 24px;
        --rspond-space-x-large: 40px;


        /* Links */
        --rspond-link-color: #52a0fa;
        --rspond-link-color-hover: #3fb950;
        --rspond-link-color-secondary: #8da3bf;
        --rspond-link-color-secondary-hover: #3fb950;

        /* Sort indicators */
        --rspond-sort-icon-color: #8da3bf;

        /* Column resize */
        --rspond-resize-handle-color: rgba(128, 137, 144, 0.4);
        --rspond-resize-handle-color-hover: var(--rspond-status-success);
        --rspond-resize-handle-width: 2px;

        /* Row striping. A stripe is a reading aid, not a band of colour: it only has to be enough for the eye to
           keep one record's cells together while it tracks across a wide row. On a dark surface a light overlay
           carries much further than its alpha suggests, so this sits well under what reads as a shade. */
        --rspond-row-odd-background: rgba(255, 255, 255, 0.018);

        /* Source code highlighting */
        --rspond-code-background: #1e1e1e;
        --rspond-code-text: #d4d4d4;
        --rspond-code-border: #3e3e42;
        --rspond-code-keyword: #ff7b72;
        --rspond-code-string: #7ee787;
        --rspond-code-comment: #8b949e;
        --rspond-code-number: #ffa657;
        --rspond-code-type: #d2a8ff;
        --rspond-code-function: #79c0ff;
        --rspond-code-tag: #7ee787;
        --rspond-code-attribute: #79c0ff;
        --rspond-code-meta: #ffa657;
        --rspond-code-built-in: #79c0ff;
        --rspond-code-line-number: #858585;

        /* Toolbar controls */
        --rspond-toolbar-font-size: var(--rspond-font-size-default);
        --rspond-toolbar-padding-y: 4px;
        --rspond-toolbar-padding-x: 8px;
        --rspond-toolbar-gap: 0.5rem;
        --rspond-toolbar-control-height: 1.75rem;

        /* Palette */
        --rspond-palette-gray: #8b949e;
        --rspond-palette-red: #f85149;
        --rspond-palette-orange: #f0883e;
        --rspond-palette-yellow: #e3b341;
        --rspond-palette-green: #3fb950;
        --rspond-palette-teal: #39d2c0;
        --rspond-palette-blue: #58a6ff;
        --rspond-palette-purple: #bc8cff;
        --rspond-palette-pink: #f778ba;

        /* Toast */
        --rspond-toast-background: #2d333b;
        --rspond-toast-text: #e6edf3;
        --rspond-toast-border: #444c56;
        --rspond-toast-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);

        /* The arrow breadcrumbs: behind the reader in the accent blue, because a passed stage is somewhere to go
           back to; where they are in the primary green; ahead in gray, because it cannot be reached yet. Each fill
           is dark enough to carry white text. */
        --rspond-breadcrumb-passed-background: #1f6feb;
        --rspond-breadcrumb-passed-text: #ffffff;
        --rspond-breadcrumb-current-background: var(--rspond-selected-background);
        --rspond-breadcrumb-current-text: #ffffff;
        --rspond-breadcrumb-ahead-background: #484f58;
        --rspond-breadcrumb-ahead-text: #ffffff;

        /* Autocomplete dropdown */
        --rspond-autocomplete-background: #1c2128;
        --rspond-autocomplete-border: #373e47;
        --rspond-autocomplete-text: var(--rspond-components-text-primary);
        --rspond-autocomplete-hover-background: #262c34;
    }
}