/* ============================================================
   TOKENS. This is the only file you need to touch to restyle the site.
   Every value below is applied to the 2020 theme by custom.css, which
   must be linked after this file.

   The theme's own stylesheet (styles.min.css) is minified and hardcoded,
   so it is left untouched: nothing here edits it, everything overrides it.
   ============================================================ */

:root {

    /* ---------- Colour ----------
       Active palette: "Slate & amber". The original green and the other
       alternatives are listed at the bottom of this file: paste one over
       the six values below to switch. */

    --accent-dark: #0f172a;     /* section titles, icon circles, body links */
    --accent: #1e293b;          /* sidebar background */
    --accent-bright: #f59e0b;   /* rule above the highlight figures */

    /* --accent-dark does three jobs at once in light mode. They are split here
       because dark mode needs them to diverge: a section title has to turn
       light, while the disc behind a white icon glyph has to stay dark. */
    --title-color: var(--accent-dark);
    --icon-bg: var(--accent-dark);
    --link-color: var(--accent-dark);

    --tag-bg: #f1f5f9;          /* skill tags */
    --tag-border: #dbe3ec;
    --tag-text: #1e293b;

    /* Neutrals. Shared by every palette, rarely worth changing. */
    --text: #545e6c;            /* body copy */
    --heading: #3f4650;         /* job titles, skill group labels */
    /* #97aac3 (dal tema 2020) rendeva 2.37:1 su bianco, sotto la soglia WCAG AA
       di 4.5:1: le didascalie sotto i numeri erano il testo meno leggibile della
       pagina. Questo rende 4.76:1 e si accorda con lo slate. */
    --muted: #64748b;           /* dates, company names, captions */
    --page-bg: #f5f5f5;         /* the canvas behind the sheet */
    --sheet-bg: #fff;           /* the sheet itself */

    /* ---------- Typography ---------- */

    --font-body: roboto, sans-serif;
    --body-size: 14px;
    --line-height: 1.42857143;
    --title-size: 20px;         /* section titles in the main column */
    --aside-title-size: 16px;   /* section titles in the sidebar */
    --job-size: 16px;           /* job titles */
    --figure-size: 26px;        /* the big highlight numbers */
    --footer-size: 11.5px;      /* consent line and page note in the footer */

    /* justify, as requested: cleaner block edges. Note that CSS does not
       hyphenate by default, so long words can open gaps between words.
       Switch to `left` here if that ever bothers you. */
    --body-align: justify;

    /* ---------- Layout ---------- */

    --page-max-width: 960px;
    --main-width: 75%;
    --aside-width: 25%;
    --aside-min-width: 240px;

    --body-padding: 30px;       /* gap between the sheet and the viewport */
    --main-padding: 60px;
    --main-padding-mobile: 30px;
    --aside-padding: 30px;
    --section-gap: 60px;
    --section-gap-mobile: 30px;

    --tag-radius: 3px;
    --profile-size-mobile: 104px; /* portrait size once the columns stack */

    /* profile.jpg is already black and white, so no filter is needed and none
       is applied: what you see is the file. Set this to `grayscale(1)` if a
       colour portrait ever replaces it and you want the page to stay
       monochrome, bearing in mind the filter does not reach og:image, which
       social previews read straight from the file. */
    --photo-filter: none;
    --mobile-breakpoint: 770px;   /* documentation only: see the note below */
}

/* ---------- DARK MODE ----------
   Scoped to `screen` deliberately: print must stay light, otherwise a PDF
   generated on a machine set to dark would come out with a black sheet.
   Every pair here was measured against WCAG AA; the tightest is --muted on
   the sheet at 6.96:1. */

@media screen and (prefers-color-scheme: dark) {
    :root {
        --page-bg: #020617;
        --sheet-bg: #0f172a;
        --accent: #1e293b;

        --text: #cbd5e1;
        --heading: #f1f5f9;
        --muted: #94a3b8;

        --title-color: #f1f5f9;
        --icon-bg: #334155;
        --link-color: #fbbf24;

        --tag-bg: #1e293b;
        --tag-border: #334155;
        --tag-text: #cbd5e1;
    }
}

/* NOTE ON theme-color
   index.html carries <meta name="theme-color">, which tints the browser UI on
   mobile. A meta tag cannot read a CSS variable, so when you switch palette
   set that value to the new --accent by hand. It is currently #1e293b. */

/* NOTE ON THE BREAKPOINT
   CSS cannot use a variable inside a @media query condition, so the
   770px value is written literally in custom.css. If you change
   --mobile-breakpoint you must change it there too. It is the only
   value in this file that is not wired up automatically. */


/* ============================================================
   ALTERNATIVE PALETTES
   Replace the six colour values above with one of these blocks.
   ============================================================

   Slate & amber, the most "senior engineer" of the four:
     --accent-dark: #0f172a;  --accent: #1e293b;  --accent-bright: #f59e0b;
     --tag-bg: #f1f5f9;       --tag-border: #dbe3ec;  --tag-text: #1e293b;

   Deep teal, reads as data and infrastructure:
     --accent-dark: #0f3d3e;  --accent: #115e59;  --accent-bright: #14b8a6;
     --tag-bg: #effaf8;       --tag-border: #cfe9e5;  --tag-text: #0f3d3e;

   Indigo, classic tech without being loud:
     --accent-dark: #1e1b4b;  --accent: #312e81;  --accent-bright: #6366f1;
     --tag-bg: #f1f2fd;       --tag-border: #dcdef8;  --tag-text: #312e81;

   Original 2020 green, kept for reference:
     --accent-dark: #134513;  --accent: #238123;  --accent-bright: #33bd33;
     --tag-bg: #eef5ee;       --tag-border: #d5e5d5;  --tag-text: #134513;
*/