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

   Every colour, font, blur, corner radius and the wallpaper is set in this
   file, and nowhere else. The page layout itself (buttons, cards, the menu,
   forms) comes from base.css, which is a copy of the J7 Creations stylesheet;
   this file is loaded after it and replaces J7's look with Atomik's.

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

   Colours 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. They use the same names. A new name must go in both.

   After changing a colour, check it can still be read:
       node scripts/check-theme.mjs
   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 Licence;
   the licence 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: 500; font-style: normal; font-display: swap;
             src: url('../fonts/Barlow-500.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. */
    --brand-red: #FE0000;

    /* 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;
    /* "Included", "confirmed" and other good news */
    --color-success: #7FE6C3;

    /* Buttons fill from start to end, so the same red twice makes a solid
       button. The middle colour is a link's colour when the pointer is on
       it, and the highlight in the big hero heading. */
    --color-gradient-start: #D40000;
    --color-gradient-mid: #FFA093;
    --color-gradient-end: #D40000;

    /* See-through red tints behind callouts and highlighted panels */
    --wash-accent: rgba(254, 0, 0, 0.12);
    --wash-accent-strong: rgba(254, 0, 0, 0.22);
    --wash-success: rgba(61, 184, 150, 0.14);

    /* 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-base: 1rem;
    --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 (a large one, and a smaller one
       for phones), 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.96438ede.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 names are the light theme's versions. */
    --glass-blur: blur(14px);
    --card-bg: rgba(18, 18, 22, 0.55);
    --card-bg-soft: rgba(18, 18, 22, 0.48);
    --card-border: rgba(255, 255, 255, 0.12);
    --card-hover-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
    --card-bg-light: rgba(255, 255, 255, 0.29);
    --card-bg-soft-light: rgba(255, 255, 255, 0.27);
    --card-border-light: rgba(0, 0, 0, 0.3);
    --card-hover-shadow-light: 0 10px 28px rgba(0, 0, 0, 0.18);
    --input-blur: blur(6px);
    --input-bg: rgba(18, 18, 22, 0.72);
    --input-border: rgba(255, 255, 255, 0.2);
    --input-bg-light: rgba(255, 255, 255, 0.54);
    --input-text-light: #0B0B0D;
    --control-border-light: rgba(0, 0, 0, 0.18);
    --control-text-light: #0B0B0D;
    --menu-bg: rgba(11, 11, 13, 0.92);
    --menu-border: rgba(255, 255, 255, 0.14);
    --menu-text: #F4F4F5;
    --portfolio-border-light: rgba(255, 255, 255, 0.6);
    --breadcrumb-bg-light: rgba(255, 255, 255, 0.32);
    --result-bg-light: rgba(255, 255, 255, 0.24);
    --footer-bg-light: rgba(255, 255, 255, 0.94);
    --float-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    --float-shadow-light: 0 4px 12px rgba(0, 0, 0, 0.2);
    --toggle-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);

    /* Text inside a glass card in the light theme, 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-success: #0D4030;
    --glass-line: rgba(0, 0, 0, 0.16);

    /* Text and icons on a red button; the red as "red, green, blue" for the
       glow under a button the pointer is on; the theme button's colours; and
       the link colour in a highlighted result panel */
    --on-accent: #FFFFFF;
    --accent-rgb: 254, 0, 0;
    --toggle-gradient: linear-gradient(135deg, #FE0000, #7C3AED);
    --result-accent: #FF8A7D;

    /* The rail: the one extra colour, 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, #FE0000 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 colour it takes */
    --card-lift: 6px;
    --card-speed: 180ms;
    --card-hover-border: #FE0000;

    /* Big banner sections: the darkening laid over the wallpaper, and the
       thin diagonal stripes */
    --hero-wash: rgba(11, 11, 13, 0.42);
    --stripe-colour: rgba(254, 0, 0, 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;
}

/* 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;
    --color-accent-strong: #D40000;
    --color-control-fill: #B00000;
    --color-success: #8FECD0;

    --wash-accent: rgba(254, 0, 0, 0.14);
    --wash-accent-strong: rgba(254, 0, 0, 0.24);
    --wash-success: rgba(111, 216, 180, 0.14);

    /* 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);
}