/* Atomik Menace: the look of the site, in one place.

   Every color, font, blur, corner radius and the wallpaper is set in this
   file, and nowhere else. The layout (buttons, cards, the menu, forms) is in
   base.css and the other stylesheets, which take every value from here.

   To change how the site looks, change a value here, save, and reload the
   page. Nothing needs building.

   Colors are hex codes (#FE0000) or rgba(red, green, blue, opacity), where
   opacity runs from 0 (see-through) to 1 (solid).

   There are two blocks: the first is the dark theme, the second is the light
   theme. A value the light block does not set is the dark block's.

   After changing a color, check it can still be read:
       npm run check
   It measures text against what is really behind it, in both themes. */

/* The fonts, stored in /fonts. Both are free to use (SIL Open Font License;
   the license files are next to them). Barlow is the text, Bangers the big
   headings. */
@font-face { font-family: 'Barlow'; font-weight: 400; font-style: normal; font-display: swap;
             src: url('../fonts/Barlow-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-style: normal; font-display: swap;
             src: url('../fonts/Barlow-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 700; font-style: normal; font-display: swap;
             src: url('../fonts/Barlow-700.woff2') format('woff2'); }
@font-face { font-family: 'Bangers'; font-weight: 400; font-style: normal; font-display: swap;
             src: url('../fonts/Bangers-400.woff2') format('woff2'); }

/* EDIT HERE: the dark theme. */
:root {
    /* The brand red: the logo, the rail, and big type only. Small text in
       this red is hard to read on black, which is what the lighter reds
       below are for. It is written once, as red, green and blue; everything
       else made from it (the tints, the glow, the rail, the edges) follows. */
    --brand-red-rgb: 254, 0, 0;
    --brand-red: rgb(var(--brand-red-rgb));

    /* Page and solid surfaces, darkest first */
    --color-bg-dark: #0B0B0D;
    --color-bg-darker: #060607;
    --color-card-bg: #17171B;
    --color-input-bg: #202026;
    --color-border: #34343C;

    /* Text: main, secondary, faintest */
    --color-text-white: #F4F4F5;
    --color-text-gray: #C1C1C9;
    --color-text-muted: #9C9CA6;

    /* Links and small red text (a lighter red, readable on dark), and the
       deeper red that buttons, tabs and the menu's Contact button are filled
       with (white text sits on it). */
    --color-accent: #FF6E5F;
    --color-accent-strong: #D40000;
    /* The fill behind white text on small controls (the arrows beside a row of
       photos, the selected tab). It stays this deep red in both themes. */
    --color-control-fill: #B00000;

    /* Buttons fill from start to end, so the same red twice makes a solid
       button. The middle color is a link's color when the pointer is on it. */
    --color-gradient-start: var(--color-accent-strong);
    --color-gradient-mid: #FFA093;
    --color-gradient-end: var(--color-accent-strong);

    /* See-through red tints behind highlighted panels */
    --wash-accent: rgba(var(--brand-red-rgb), 0.12);
    --wash-accent-strong: rgba(var(--brand-red-rgb), 0.22);

    /* Glass panels: the fill, a solid version, and the edge */
    --panel-bg: rgba(18, 18, 22, 0.55);
    --panel-bg-solid: #141418;
    --panel-border: rgba(255, 255, 255, 0.12);

    --shadow-color: rgba(0, 0, 0, 0.4);
    --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.35);

    /* Spacing, smallest to largest (rem is the text size, usually 16px) */
    --spacing-3xs: 0.25rem;
    --spacing-2xs: 0.5rem;
    --spacing-xs: 0.5rem;
    --spacing-s: 0.75rem;
    --spacing-sm: 1rem;
    --spacing-m: 1.5rem;
    --spacing-md: 2rem;
    --spacing-l: 3rem;
    --spacing-lg: 4rem;
    --spacing-xl: 6rem;

    /* Text sizes, smallest to largest */
    --text-xs: 0.8125rem;
    --text-sm: 0.9375rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.25rem;
    --text-4xl: 3rem;

    /* Corner rounding: cards, small things, big panels */
    --radius: 12px;
    --radius-sm: 6px;
    --radius-lg: 14px;

    /* How far a jump to a section stops below the fixed menu bar */
    --nav-offset: 6.5rem;

    /* Fonts: the text, and the big headings */
    --font-body: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-display: 'Bangers', 'Barlow', Impact, sans-serif;

    /* The wallpaper the whole site floats on (the whole picture, and for
       phones an upright cut from its middle), the darkening laid over it,
       and the fade behind the menu bar. A new wallpaper gets a new file
       name, so no browser shows an old copy from its cache. */
    --wallpaper: url('../images/atomik-wall.f0b1d434.jpg');
    --wallpaper-small: url('../images/atomik-wall-sm.fbf309f6.jpg');
    --wallpaper-scrim: rgba(11, 11, 13, 0.35);
    --nav-fade: linear-gradient(to bottom,
        rgba(11, 11, 13, 0.82) 0%,
        rgba(11, 11, 13, 0.64) 55%,
        rgba(11, 11, 13, 0) 100%);

    /* Glass cards, inputs and menus: how blurry the glass is, then fills,
       edges and shadows. The light theme's own are in its block below. */
    --glass-blur: blur(14px);
    --card-hover-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
    --input-blur: blur(6px);
    --input-bg: rgba(18, 18, 22, 0.72);
    --input-border: rgba(255, 255, 255, 0.2);
    --menu-bg: rgba(11, 11, 13, 0.92);
    --menu-border: rgba(255, 255, 255, 0.14);
    --menu-text: #F4F4F5;
    --float-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    --toggle-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    /* The shade behind a sheet that rises over the page on a phone */
    --shade: rgba(0, 0, 0, 0.5);

    /* Text and icons on a red button; the red as "red, green, blue" for the
       glow under a button the pointer is on; and the theme button's colors */
    --on-accent: #FFFFFF;
    --accent-rgb: var(--brand-red-rgb);
    --toggle-gradient: linear-gradient(135deg, var(--brand-red), #7C3AED);

    /* The rail: the one extra color, red through violet to blue. It runs
       along the top edge of every page and under section headings. Never on
       buttons. */
    --rail-gradient: linear-gradient(90deg, var(--brand-red) 0%, #7C3AED 55%, #2563EB 100%);
    --rail-height: 4px;

    /* Product cards: how far one lifts when the pointer is on it, how fast,
       and the edge color it takes */
    --card-lift: 6px;
    --card-speed: 180ms;
    --card-hover-border: var(--brand-red);

    /* The thin diagonal stripes on a striped banner */
    --stripe-colour: rgba(var(--brand-red-rgb), 0.08);

    /* The front page's panels: the dark tile behind each picture, so a logo
       sits on it the way it sits on the wallpaper, in either theme */
    --art-tile: #0B0B0D;

    /* Customize's "any color" swatch: every color around a circle */
    --swatch-any: conic-gradient(#C12E1F, #FF9016, #F4EE2A, #00AE42, #0086D6, #5E43B7, #C12E1F);

    /* The filled stars of a review */
    --star-on: #FFB020;

    /* The note across the top of a preview from Workbench */
    --note-bg: #fde68a;
    --note-text: #1f2937;

    /* Dev mode's tools: a faint text's outline, the layout grid's lines, and
       the ids on the cards */
    --dev-flag: #FF00D4;
    --dev-grid-row: rgba(0, 160, 255, 0.16);
    --dev-grid-edge: rgba(255, 0, 80, 0.5);
    --dev-grid-column: rgba(255, 0, 80, 0.1);
    --dev-label-bg: rgba(0, 0, 0, 0.8);
    --dev-label-text: #FFFFFF;
}

/* EDIT HERE: the light theme. The wallpaper stays dark; the glass panels turn
   frosted white, and only the text inside them turns dark. Text that sits
   straight on the wallpaper stays light. */
[data-theme="light"] {
    --color-bg-dark: rgba(255, 255, 255, 0.29);
    --color-bg-darker: rgba(255, 255, 255, 0.32);
    --color-card-bg: rgba(255, 255, 255, 0.29);
    --color-input-bg: rgba(255, 255, 255, 0.24);
    --color-border: rgba(0, 0, 0, 0.14);

    --color-text-white: #FFFFFF;
    --color-text-gray: #D8D8DE;
    --color-text-muted: #C4C4CC;

    --color-accent: #FF8A7D;

    --wash-accent: rgba(var(--brand-red-rgb), 0.14);
    --wash-accent-strong: rgba(var(--brand-red-rgb), 0.24);

    /* The frosted glass: the white wash, how the wallpaper shows through it
       (blurred, softened and lifted), and the edge */
    --panel-bg: rgba(255, 255, 255, 0.29);
    --panel-bg-solid: rgba(255, 255, 255, 0.34);
    --glass-filter: blur(14px) contrast(0.5) brightness(2) saturate(1.8);
    --glass-filter-dense: blur(16px) contrast(0.5) brightness(2) saturate(1.8);
    --panel-border: rgba(255, 255, 255, 0.55);

    --shadow-color: rgba(0, 0, 0, 0.35);
    --shadow-card: 0 4px 18px rgba(0, 0, 0, 0.28);

    /* The glass's own: its fill and edge, a denser fill behind the footer's
       lines, and a near-solid fill where a browser cannot blur */
    --card-bg-light: rgba(255, 255, 255, 0.29);
    --card-border-light: rgba(0, 0, 0, 0.3);
    --glass-border-light: rgba(255, 255, 255, 0.6);
    --glass-bg-dense-light: rgba(255, 255, 255, 0.32);
    --glass-solid-light: rgba(255, 255, 255, 0.94);
    --input-bg-light: rgba(255, 255, 255, 0.54);
    --input-text-light: #0B0B0D;

    /* Text inside a glass card, where the glass is white and the text turns
       dark */
    --glass-ink: #0B0B0D;
    --glass-ink-gray: #2E2E34;
    --glass-ink-muted: #3A3A42;
    --glass-accent: #7A0000;
    --glass-accent-strong: #5C0000;
    --glass-line: rgba(0, 0, 0, 0.16);
    --glass-star: #C27A00;
}