/* itadvisory.tech — design tokens
   Colors, type, spacing, radii, motion. Nothing else belongs in this file.
   Never hardcode a hex value outside of here. */

:root {
  /* ---- color ---- */
  --ink:        #101322;
  --ink-2:      #2A3050;
  --ink-3:      #5A6285;
  --paper:      #F6F7FB;
  --surface:    #FFFFFF;
  --white:      #FFFFFF;
  --line:       #E3E6F0;
  --line-dark:  #262C46;
  --ink-tint:   #B9BFDB;   /* muted text on dark (.contact) */
  --ink-field:  #1A1F36;   /* form field background on dark (.contact) */

  --volt:       #2B4BFF;   /* primary accent */
  --volt-dark:  #1B32C4;
  --volt-tint:  #EAEDFF;
  --flare:      #FF3D7F;   /* impact numbers only */
  --flare-tint: #FFEBF2;
  --signal:     #00D68F;   /* availability / positive delta only */

  /* ---- type ---- */
  --font-display: "Bricolage Grotesque", "Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --step--1: clamp(0.78rem, 0.76rem + 0.10vw, 0.84rem);
  --step-0:  clamp(0.98rem, 0.94rem + 0.18vw, 1.06rem);
  --step-1:  clamp(1.18rem, 1.10rem + 0.40vw, 1.40rem);
  --step-2:  clamp(1.50rem, 1.32rem + 0.90vw, 2.05rem);
  --step-3:  clamp(1.95rem, 1.60rem + 1.70vw, 3.00rem);
  --step-4:  clamp(2.45rem, 1.80rem + 3.10vw, 4.40rem);

  --tracking-tight: -0.03em;
  --tracking-label:  0.14em;

  /* ---- space ---- */
  --s-1: 0.5rem;
  --s-2: 0.75rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2rem;
  --s-6: 3rem;
  --s-7: 4.5rem;
  --s-8: 7rem;

  --measure: 62ch;
  --shell:   1180px;

  /* ---- form ---- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(16, 19, 34, 0.06);
  --shadow-md: 0 10px 30px -12px rgba(16, 19, 34, 0.18);

  /* ---- motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:  260ms;

  /* ---- semantic (theme-aware; swapped for dark mode below) ---- */
  --bg:           var(--paper);
  --fg:           var(--ink);
  --fg-muted:     var(--ink-2);
  --fg-subtle:    var(--ink-3);
  --card:         var(--surface);
  --border:       var(--line);
  --header-bg:    rgba(246, 247, 251, 0.85);
  --link:         var(--volt);
  --accent-label: var(--volt-dark);
  --tag-bg:       var(--volt-tint);
  --tag-fg:       var(--volt-dark);
  --photo-bg:     var(--volt-tint);
  --contact-bg:   var(--ink);
  --contact-fg:   var(--paper);
}

/* Dark palette: system preference first, explicit [data-theme] toggle wins either way. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:           #0B0D17;
    --fg:           #F1F2F8;
    --fg-muted:     #B9BFDB;
    --fg-subtle:    #8A91B8;
    --card:         #171B2E;
    --border:       #2A3050;
    --header-bg:    rgba(11, 13, 23, 0.85);
    --link:         #7C93FF;
    --accent-label: #8FA3FF;
    --tag-bg:       #1B2450;
    --tag-fg:       #A9B8FF;
    --photo-bg:     #1B2450;
    --contact-bg:   #1B2040;
    --contact-fg:   #F1F2F8;
  }
}
:root[data-theme="dark"] {
  --bg:           #0B0D17;
  --fg:           #F1F2F8;
  --fg-muted:     #B9BFDB;
  --fg-subtle:    #8A91B8;
  --card:         #171B2E;
  --border:       #2A3050;
  --header-bg:    rgba(11, 13, 23, 0.85);
  --link:         #7C93FF;
  --accent-label: #8FA3FF;
  --tag-bg:       #1B2450;
  --tag-fg:       #A9B8FF;
  --photo-bg:     #1B2450;
  --contact-bg:   #1B2040;
  --contact-fg:   #F1F2F8;
}

/* Self-hosted fonts — drop the woff2 files into assets/fonts/ and uncomment.
   See assets/fonts/README.md. Until then the system stack above is used. */
/*
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-var.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
*/