/* Light and dark themes. The theme script in base.html.twig sets data-theme on <html> before the page paints
   (the visitor's choice from the menu toggle, else the device setting); an element can also carry
   data-theme="dark" to stay dark in either theme, like the photo viewing blocks. */

:root,
[data-theme="light"] {
    color-scheme: light;

    --color-bg: #FAFAF7;
    --color-surface: #FFFFFF;
    --color-surface-raised: #EFEFEA;
    --color-border-subtle: #E6E6E1;
    --color-border: #E4E4DF;
    --color-border-strong: #D6D6D0;

    --color-text: #111113;
    --color-text-strong: #111113;
    --color-text-soft: #3A3A40;
    --color-text-muted: #5C5C63;
    --color-text-faint: #6A6A72;

    /* Bright, with white text on it at 3.1:1. Green text on the page uses the deeper --color-accent-text */
    --color-accent: #0CA85F;
    --color-accent-hover: #0A9653;
    --color-on-accent: #FFFFFF;
    --color-accent-text: #00753E;
    --color-accent-tint: rgba(12, 168, 95, .08);
    --color-accent-glow: transparent;
    --color-emphasis: var(--color-accent-text);

    --color-error: #C2185B;
    --color-on-error: #FFFFFF;

    --color-shadow: rgba(17, 17, 19, .18);
    --color-backdrop: rgba(250, 250, 247, .7);
}

[data-theme="dark"] {
    color-scheme: dark;

    --color-bg: #09090B;
    --color-surface: #121215;
    --color-surface-raised: #17171A;
    --color-border-subtle: #1F1F23;
    --color-border: #26262B;
    --color-border-strong: #3A3A40;

    --color-text: #F5F5F2;
    --color-text-strong: #FFFFFF;
    --color-text-soft: #C4C4C8;
    --color-text-muted: #A1A1A6;
    --color-text-faint: #8A8A90;

    --color-accent: #4AF2A1;
    --color-accent-hover: #73F5B6;
    --color-on-accent: #04170C;
    --color-accent-text: #4AF2A1;
    --color-accent-tint: rgba(74, 242, 161, .06);
    --color-accent-glow: rgba(74, 242, 161, .55);
    --color-emphasis: var(--color-text-strong);

    --color-error: #FF6FA5;
    --color-on-error: #1A0010;

    --color-shadow: rgba(0, 0, 0, .5);
    --color-backdrop: rgba(9, 9, 11, .7);
}

:root {
    /* Code blocks and the labels laid over photos are dark in both themes */
    --color-code-bg: #131316;
    --color-code-border: #26262B;
    --color-code-text: #D4D4D8;
    --color-code-label: #8A8A90;
    --color-overlay: rgba(9, 9, 11, .8);
    --color-on-overlay: #F5F5F2;

    --transition-animation-ms: 120ms;

    --base-content-width: 1176px;

    --font-family-main: "Geist", system-ui, sans-serif;
    --font-family-mono: "Geist Mono", ui-monospace, monospace;
    --font-family-logo: "IBM Plex Sans", sans-serif;

    --font-size: 17px;
    --font-size-small: 15px;

    --border-radius: 14px;
    --border-radius-small: 8px;
    --border-radius-big: 24px;
    --border-radius-pill: 999px;

    --menu-height: 76px;

    --titles-font-weight: 600;
    --titles-letter-spacing: -0.03em;
    --titles-font-big-letter-spacing: -0.045em;
}