/* ============================================================
   Inspiroiva Creative — Colors & Type
   Source: Brand_Guide_Graafinen_Ohjeistus_Inspiroiva_Creative_2023.pdf
           INSPIROIVA_BRANDGUIDE_VARIT.pdf
   ============================================================ */

/* --- Nunito — brand-defined primary typeface, served locally from fonts/ ----- */
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 200; font-display: swap; src: url('/shared/fonts/Nunito-ExtraLight.ttf') format('truetype'); }
@font-face { font-family: 'Nunito'; font-style: italic; font-weight: 200; font-display: swap; src: url('/shared/fonts/Nunito-ExtraLightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 300; font-display: swap; src: url('/shared/fonts/Nunito-Light.ttf') format('truetype'); }
@font-face { font-family: 'Nunito'; font-style: italic; font-weight: 300; font-display: swap; src: url('/shared/fonts/Nunito-LightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400; font-display: swap; src: url('/shared/fonts/Nunito-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Nunito'; font-style: italic; font-weight: 400; font-display: swap; src: url('/shared/fonts/Nunito-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 600; font-display: swap; src: url('/shared/fonts/Nunito-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Nunito'; font-style: italic; font-weight: 600; font-display: swap; src: url('/shared/fonts/Nunito-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 700; font-display: swap; src: url('/shared/fonts/Nunito-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Nunito'; font-style: italic; font-weight: 700; font-display: swap; src: url('/shared/fonts/Nunito-BoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 800; font-display: swap; src: url('/shared/fonts/Nunito-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Nunito'; font-style: italic; font-weight: 800; font-display: swap; src: url('/shared/fonts/Nunito-ExtraBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 900; font-display: swap; src: url('/shared/fonts/Nunito-Black.ttf') format('truetype'); }
@font-face { font-family: 'Nunito'; font-style: italic; font-weight: 900; font-display: swap; src: url('/shared/fonts/Nunito-BlackItalic.ttf') format('truetype'); }

:root {
  /* ──────────── PRIMARY PALETTE (Päävärit) ──────────── */
  --ic-black:        #1b1c1f;   /* Rikottu musta — "broken black", warm near-black  */
  --ic-blue:         #4dc6e1;   /* Vaalea sininen — signature light blue            */
  --ic-white:        #ffffff;   /* Valkoinen                                        */

  /* ──────────── SECONDARY PALETTE (Lisävärit) ──────────── */
  --ic-blue-dark:    #001534;   /* Tumma sininen — historic, used sparingly post-2021 */

  /* Greys — derived as % tints of Rikottu musta on white                          */
  --ic-grey-80:      #494a4d;
  --ic-grey-60:      #777779;
  --ic-grey-40:      #a4a5a6;
  --ic-grey-20:      #d1d2d2;

  /* Accents from BRANDGUIDE_VARIT — use sparingly, color-coding only             */
  --ic-red:          #ee6352;   /* Punainen      */
  --ic-salmon:       #f79d84;   /* Lohenpunainen */
  --ic-yellow:       #fac05e;   /* Keltainen     */

  /* ──────────── SEMANTIC TOKENS ──────────── */
  --bg:              var(--ic-white);
  --bg-alt:          #f6f7f8;        /* hairline tint, for sectioned panels       */
  --bg-inverse:      var(--ic-black);

  --fg:              var(--ic-black);
  --fg-muted:        var(--ic-grey-80);
  --fg-subtle:       var(--ic-grey-60);
  --fg-disabled:     var(--ic-grey-40);
  --fg-inverse:      var(--ic-white);

  --brand:           var(--ic-blue);
  --brand-hover:     #36b9d6;       /* -8% L on light blue */
  --brand-press:     #25a8c4;
  --brand-on:        var(--ic-black);  /* text/icons over brand blue: black, never white */

  --border:          #e6e7e8;
  --border-strong:   var(--ic-grey-40);
  --focus-ring:      0 0 0 3px color-mix(in oklch, var(--ic-blue) 50%, transparent);

  /* ──────────── TYPOGRAPHY ──────────── */
  --font-sans: 'Nunito', 'Arial', system-ui, -apple-system, sans-serif;
  --font-fallback: 'Arial', system-ui, sans-serif;       /* PPT / system docs */

  /* Weights — Nunito ships Light/Regular/SemiBold/Bold/ExtraBold/Black           */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;
  --fw-black:     900;

  /* Type scale — pyöristetty, leveähkö Nunito feels best at slightly loose track */
  --fs-display: clamp(56px, 7.2vw, 104px);
  --fs-h1:      clamp(40px, 4.6vw, 64px);
  --fs-h2:      clamp(30px, 3.2vw, 44px);
  --fs-h3:      24px;
  --fs-h4:      19px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-eyebrow: 12px;

  --lh-tight:   1.04;
  --lh-snug:    1.18;
  --lh-body:    1.55;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-eyebrow: 0.14em;

  /* ──────────── SPACING / RADII / ELEVATION ──────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  --radius-sm: 6px;
  --radius:    10px;       /* default — echoes Nunito's rounded terminals         */
  --radius-lg: 18px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(27, 28, 31, 0.06), 0 1px 1px rgba(27, 28, 31, 0.04);
  --shadow-2: 0 4px 14px rgba(27, 28, 31, 0.08), 0 1px 2px rgba(27, 28, 31, 0.04);
  --shadow-3: 0 18px 48px -16px rgba(27, 28, 31, 0.22), 0 4px 12px rgba(27, 28, 31, 0.06);
  --shadow-brand: 0 12px 32px -10px color-mix(in oklch, var(--ic-blue) 55%, transparent);

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-quick: 140ms;
  --dur-base:  220ms;
  --dur-slow:  380ms;
}

/* ──────────── SEMANTIC ELEMENT DEFAULTS ──────────── */
html { color: var(--fg); background: var(--bg); }
body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  font-family: var(--font-sans);
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}

.display, h1.display {
  font-size: var(--fs-display);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
h1, .h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
h2, .h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
}
h3, .h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}
h4, .h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
}
p, .body { font-size: var(--fs-body); line-height: var(--lh-body); }
.small { font-size: var(--fs-small); }
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand);
}

/* Links inherit color, underline on hover (warm, never bluish-purple)             */
a {
  color: inherit;
  text-decoration-color: var(--ic-blue);
  text-underline-offset: 3px;
  transition: opacity var(--dur-quick) var(--ease-out);
}
a:hover { opacity: 0.78; }