/* ============================================
   DESIGN TOKENS
   Source: Figma "Portfolio Website Design"
     light — node 71:955
     dark  — node 1:2
   :root holds the light theme (default).
   [data-theme="dark"] overrides the same names,
   so a theme toggle only has to set the attribute
   on <html>.
   ============================================ */

/* ---------- Fonts: served from /fonts (see the licenses there) ---------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-cyrillic-wght-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/bricolage-grotesque-latin-opsz-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* What shows until the fonts arrive: Arial sized to the width and line metrics
   of the real font, so that text keeps its line breaks when the font swaps in.
   Bricolage has no Cyrillic, so its fallback stops at Latin. */
@font-face {
  font-family: 'Inter Fallback';
  font-weight: 400;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans');
  size-adjust: 106.78%;
  ascent-override: 90.75%;
  descent-override: 22.57%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Fallback';
  font-weight: 400;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans');
  size-adjust: 106.23%;
  ascent-override: 91.22%;
  descent-override: 22.69%;
  line-gap-override: 0%;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter Fallback';
  font-weight: 700;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold');
  size-adjust: 101.15%;
  ascent-override: 95.8%;
  descent-override: 23.83%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Fallback';
  font-weight: 700;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold');
  size-adjust: 100.72%;
  ascent-override: 96.21%;
  descent-override: 23.93%;
  line-gap-override: 0%;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Bricolage Fallback';
  font-weight: 700;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold');
  size-adjust: 97.88%;
  ascent-override: 95.01%;
  descent-override: 27.59%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  /* ---------- Color: surfaces ---------- */
  --color-bg: #F8F3F5;                         /* page background */
  --color-surface: #FFFFFF;                    /* cards: skills, stats, portrait */
  --color-surface-glass: rgba(248, 243, 245, 0.7); /* floating nav pill */
  --color-surface-soft: color-mix(in srgb, var(--color-surface) 50%, var(--color-bg)); /* tool chips at rest; follows the theme */
  --color-inverse-bg: #150E14;                 /* active nav item */
  --color-inverse-text: #F8F3F5;               /* text on --color-inverse-bg */

  /* ---------- Color: text ---------- */
  --color-text: #150E14;                       /* headings, primary text */
  --color-text-muted: #6B5E66;                 /* body copy, captions, labels */
  /* Accent: dusty rose — large text only (name in hero, coloured parts of
     headings) and fills; small text and links stay --color-text */
  --color-accent: #B77770;
  --color-accent-fill: #B77770;                 /* buttons, dots */
  --color-on-accent: #150E14;                   /* text on --color-accent-fill (never white) */
  --color-accent-soft: rgba(183, 119, 112, 0.94);
  --color-accent-selection: rgba(183, 119, 112, 0.28); /* ::selection */
  --color-accent-tint: color-mix(in srgb, var(--color-accent) 14%, transparent); /* badges; follows the theme */
  --gradient-gold: linear-gradient(110deg, #C58882 0%, #B77770 55%, #A96B68 100%); /* tone-on-tone, for large accents */

  /* ---------- Color: borders ---------- */
  --color-border-subtle: rgba(21, 14, 20, 0.10); /* card outlines */
  --color-divider: rgba(21, 14, 20, 0.11);       /* section & row dividers */
  --color-border-strong: rgba(21, 14, 20, 0.18); /* pills, buttons, nav outline */

  /* ---------- Color: status & decoration ---------- */
  --color-status: #00D492;                     /* "Open to work" dot */
  --color-on-media: #FFFFFF;                   /* text on project gradients */
  --color-on-media-muted: rgba(255, 255, 255, 0.7);
  --color-media-glass: rgba(255, 255, 255, 0.15);
  --color-media-glass-border: rgba(255, 255, 255, 0.25);

  /* Hero / contact background glows (radial gradients) */
  --glow-lilac: rgba(201, 174, 222, 0.672);
  --glow-pink: rgba(232, 160, 180, 0.672);
  --glow-peach: rgba(244, 201, 168, 0.47);
  --glow-contact: rgba(232, 160, 180, 0.47);
  --glow-pink-halo: rgba(232, 160, 180, 0.585); /* pink glow behind the hero mock-up: --glow-pink, ~13% weaker */

  /* Hero mock-up: the small dot under the main card, same peach as the chip next to it */
  --mock-dot-top: #FFD5BE;
  --mock-dot-bottom: #FFD5BE;
  --mock-dot-highlight: transparent;

  /* Hero mock-up: the "button" in the main card, pink → lavender */
  --mock-btn-from: #EAB7D3;
  --mock-btn-to: #C6A9E8;
  --mock-btn-shadow: rgba(198, 169, 232, 0.35);

  /* Hero brush reveal fill — same peach / pink / lavender as the glows.
     Read by js/hero-reveal.js; keep it a plain linear-gradient with hex stops. */
  --gradient-reveal: linear-gradient(135deg, #E8A0B4 0%, #D98FA8 35%, #C9AEDE 70%, #8A7CC4 100%);

  /* ---------- Typography ---------- */
  --font-display: 'Bricolage Grotesque', 'Bricolage Fallback', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Max values = Figma desktop (1143px frame); clamp scales them down */
  --fs-display-xl: clamp(3rem, 15vw, 10.716rem);   /* 171.45px  "Product Designer" */
  --fs-display: clamp(3rem, 8.4vw, 6rem);           /* 96px      "Contact me" */
  --fs-h1: clamp(2.75rem, 6.3vw, 4.5rem);           /* 72px      "About me" */
  --fs-h2: clamp(2.25rem, 5.25vw, 3.75rem);         /* 60px      section headings, hero name */
  --fs-h3: clamp(2rem, 4.2vw, 3rem);                /* 48px      stats, education, card titles */
  --fs-h4: 1.875rem;                                /* 30px      company / project name */
  --fs-lead: 1.75rem;                               /* 28px      "I'm a Senior Product Designer…" */
  --fs-brand: 1.125rem;                             /* 18px      nav logo */
  --fs-card-title: 1.25rem;                         /* 20px      title of a text card */
  --fs-body-lg: 1.05rem;                            /* 16.8px    experience descriptions */
  --fs-body: 1rem;                                  /* 16px */
  --fs-small: 0.875rem;                             /* 14px      nav, pills, captions */
  --fs-caption: 0.75rem;                            /* 12px      stat numbers, card eyebrow */
  --fs-label: 0.7rem;                               /* 11.2px    UPPERCASE section labels */

  --lh-display: 0.9;    /* 171.45/154.3, 72/64.8 */
  --lh-display-2: 0.95; /* 96/91.2 */
  --lh-heading: 1.05;   /* 60/63 */
  --lh-solid: 1;        /* 48/48 */
  --lh-snug: 1.2;       /* 30/36 */
  --lh-lead: 1.375;     /* 28/38.5 */
  --lh-body: 1.5;       /* 16/24, 16.8/25.2, 11.2/16.8 */
  --lh-card: 1.6;       /* text of a text card */
  --lh-ui: 1.43;        /* 14/20 */

  --ls-display: -0.025em; /* every Bricolage heading: -4.29/171.45, -1.5/60 … */
  --ls-label: 0.32em;     /* 3.584/11.2 — section labels */
  --ls-eyebrow: 0.25em;   /* 3/12 — eyebrow on project cards */

  /* ---------- Spacing (4px base) ---------- */
  --space-1: 0.25rem;  /* 4  — nav item gap */
  --space-2: 0.5rem;   /* 8  — icon gap, pill gap */
  --space-3: 0.75rem;  /* 12 — grid gap of skill cards */
  --space-4: 1rem;     /* 16 — stats grid gap */
  --space-5: 1.25rem;  /* 20 — pill padding-x */
  --space-6: 1.5rem;   /* 24 — heading → paragraph */
  --space-7: 1.75rem;  /* 28 — stat card padding */
  --space-8: 2rem;     /* 32 — work card padding, row padding */
  --space-10: 2.5rem;  /* 40 — column gap */
  --space-12: 3rem;    /* 48 — page side padding */
  --space-14: 3.5rem;  /* 56 — work grid row gap */
  --space-16: 4rem;    /* 64 */
  --space-20: 5rem;    /* 80 — case header rhythm */
  --space-24: 6rem;    /* 96 — section padding-y */
  --space-30: 7.5rem;  /* 120 — hero offset */

  /* Vertical rhythm of the page (8px grid, fluid between phone and desktop) */
  --space-section: clamp(5rem, 2.9rem + 6.5vw, 8rem);   /* 80 → 128: the one gap between all sections */
  --space-content: clamp(2.5rem, 2.05rem + 1.4vw, 3.5rem); /* 40 → 56: section header → its content */

  --about-photo-max: 26.25rem;               /* 420 — photo in the one-column About block */

  /* Case pages */
  --case-icon-size: 1.25rem;                 /* 20 — line icons in text blocks */
  --case-accent-stroke: 2.25rem;              /* 36 — accent start of a block's top line */
  --case-accent-stroke-weight: 2px;
  --case-section-gap: 7rem;                  /* 112 — between sections */
  --case-heading-gap: var(--space-8);        /* 32 — section heading → first block */
  --case-text-gap: var(--space-5);           /* 20 — paragraph → paragraph, quote → quote */
  --case-group-gap: var(--space-10);         /* 40 — from a block to the next one */
  --case-lead-gap: var(--space-6);           /* 24 — a line leading to a picture → the picture */
  --case-list-gap: 0.875rem;                 /* 14 — between list items */
  --case-list-measure: 47.5rem;              /* 760 — longest line of a list */
  --case-marker-size: 0.375rem;              /* 6 — list dot */
  --case-badge-size: var(--space-8);         /* 32 — number badge on a card */
  --case-callout-stroke: 3px;                /* line left of a callout */
  --case-media-gap: var(--space-8);          /* 32 — between media in a row with no text between,
                                                  and between the two pictures of a pair */
  --case-cards-gap: var(--space-5);          /* 20 — between cards */
  --case-tile-shadow: 0 var(--space-2) var(--space-6) var(--color-border-strong); /* soft shadow of a picture tile on hover */
  --case-header-gap: var(--space-20);        /* 80 — cover → facts → first section */
  --case-facts-row-gap: var(--space-7);      /* 28 — between rows of key facts */

  /* Scroll reveal (js/reveal.js) */
  --reveal-distance: 16px;                     /* rise from below */
  --reveal-duration: 560ms;
  --reveal-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --reveal-stagger: 70ms;                      /* delay between blocks entering together */
  --reveal-max-steps: 4;                       /* steps of that delay, then no more */

  /* ---------- Shape ---------- */
  --radius-sm: 16px;   /* skill cards, mockup inside project card */
  --radius-md: 24px;   /* stat cards */
  --radius-lg: 32px;   /* portrait, project cards */
  --radius-pill: 9999px;

  /* ---------- Layout ---------- */
  --content-width: 1400px;
  --content-pad: clamp(1.25rem, 4.2vw, 3rem); /* 48px in Figma */
  --control-size: 44px;                        /* theme toggle button */
  --nav-mark-size: var(--fs-brand);            /* 18px  the mark next to the name in the header */
  --site-footer-h: calc(2 * var(--space-8) + 1px + var(--fs-small) * var(--lh-ui)); /* one line of text; two lines: .contact in css/style.css */
  --tool-icon-size: 1.25rem;                   /* 20px  icon inside a tool chip */
  --tool-slot: calc(var(--tool-icon-size) + var(--space-2)); /* icon + its gap to the text */
  --tool-transition: 200ms ease-out;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.5s;

  /* ---------- Legacy aliases ----------
     Names used by the current style.css. They point at the
     new tokens so the draft keeps rendering. Remove once
     style.css is restyled. */
  --color-paper: var(--color-bg);
  --color-paper-alt: var(--color-surface);
  --color-ink: var(--color-text);
  --color-ink-soft: var(--color-text-muted);
  --color-ink-faint: var(--color-text-muted);
  --color-rule: var(--color-divider);
  --color-canvas-dark: #150E14;  /* ledger band stays dark in both themes */
  --font-mono: var(--font-body);
  --fs-hero: var(--fs-display-xl);
  --lh-tight: var(--lh-heading);
  --lh-normal: var(--lh-body);
  --sp-1: var(--space-2);
  --sp-2: var(--space-4);
  --sp-3: var(--space-6);
  --sp-4: var(--space-10);
  --sp-5: var(--space-16);
  --sp-6: var(--space-24);
  --sp-7: var(--space-30);
  --radius: var(--radius-sm);
}

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

  /* Surfaces */
  --color-bg: #150E14;
  --color-surface: #1E161D;                    /* skill & stat cards */
  --color-surface-glass: rgba(21, 14, 20, 0.7);
  --color-inverse-bg: #F3ECEF;
  --color-inverse-text: #150E14;

  /* Text */
  --color-text: #F3ECEF;
  --color-text-muted: #9A8D95;
  --color-accent: #D7C98F;                     /* pale gold, flat */
  --color-accent-fill: #D7C98F;
  --color-on-accent: #150E14;
  --color-accent-soft: rgba(215, 201, 143, 0.94);
  --color-accent-selection: rgba(215, 201, 143, 0.28);
  --gradient-gold: none;                       /* the dark theme keeps flat gold */

  /* Borders */
  --color-border-subtle: rgba(243, 236, 239, 0.08);
  --color-divider: rgba(243, 236, 239, 0.09);
  --color-border-strong: rgba(243, 236, 239, 0.16);

  /* Glows are dimmer on dark */
  --glow-lilac: rgba(201, 174, 222, 0.42);
  --glow-pink: rgba(232, 160, 180, 0.42);
  --glow-peach: rgba(244, 201, 168, 0.294);
  --glow-contact: rgba(232, 160, 180, 0.294);
  /* same names as the light theme, current dark values (the dark theme doesn't use them yet) */
  --glow-pink-halo: rgba(232, 160, 180, 0.42);
  --mock-dot-top: #D7C98F;
  --mock-dot-bottom: #D7C98F;
  --mock-dot-highlight: transparent;
  --mock-btn-from: #D7C98F;
  --mock-btn-to: #D7C98F;
  --mock-btn-shadow: transparent;
  --gradient-reveal: linear-gradient(135deg, #F4C9A8 0%, #E8A0B4 45%, #C9AEDE 100%);
}

/* ---------- Tablets ---------- */
@media (max-width: 1023px) {
  :root {
    --case-section-gap: 5.5rem;         /* 88 */
    --case-heading-gap: var(--space-7); /* 28 */
    --case-group-gap: 2.25rem;          /* 36 */
    --case-header-gap: var(--space-14); /* 56 */
  }
}

/* ---------- Phones ---------- */
@media (max-width: 720px) {
  :root {
    --case-section-gap: var(--space-16); /* 64 */
    --case-heading-gap: var(--space-6);  /* 24 */
    --case-text-gap: var(--space-4);     /* 16 */
    --case-group-gap: var(--space-8);    /* 32 */
    --case-lead-gap: var(--space-5);     /* 20 */
    --case-list-gap: var(--space-3);     /* 12 */
    --case-media-gap: var(--space-5);   /* 20 */
    --case-header-gap: var(--space-10);  /* 40 */
    --case-facts-row-gap: var(--space-6); /* 24 */
  }
}