/* ============================================================
   PCCC — Poland-Cambodia Chamber of Commerce
   Colors + Type tokens
   Source: Księga znaku v0.1 (Moloko Studio)
   ============================================================ */

/* ------------------------------------------------------------
   Webfonts — brand-supplied Roboto + Roboto Condensed
   (both as variable fonts with the weight axis).
   ------------------------------------------------------------ */
@font-face {
  font-family: "Roboto";
  src: url("fonts/Roboto-VariableFont_wdth_wght.ttf") format("truetype-variations"),
       url("fonts/Roboto-VariableFont_wdth_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("fonts/Roboto-Italic-VariableFont_wdth_wght.ttf") format("truetype-variations"),
       url("fonts/Roboto-Italic-VariableFont_wdth_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Condensed";
  src: url("fonts/RobotoCondensed-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/RobotoCondensed-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Condensed";
  src: url("fonts/RobotoCondensed-Italic-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/RobotoCondensed-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- PRIMARY ---------- */
  --pccc-dark-indigo: #0c003d;   /* primary dark background, primary brand color */
  --pccc-black:       #000000;
  --pccc-white:       #ffffff;

  /* ---------- ACCENT ---------- */
  --pccc-vivid-indigo: #2800c9;  /* CTA, small in-text highlights — use sparingly */

  /* ---------- SECONDARY (neutrals: cold greys + plum) ---------- */
  --pccc-plum:        #46507b;   /* mid-tone, slightly desaturated indigo */
  --pccc-cold-grey-3: #a6acca;   /* darker cold grey */
  --pccc-cold-grey-2: #d3d6ed;   /* mid cold grey */
  --pccc-cold-grey-1: #e3e5f5;   /* lightest cold grey — page tints, subtle fills */

  /* ---------- SEMANTIC: foreground / background (light mode default) ---------- */
  --fg-1: var(--pccc-dark-indigo);   /* primary text */
  --fg-2: var(--pccc-plum);          /* secondary text */
  --fg-3: var(--pccc-cold-grey-3);   /* muted / tertiary text */
  --fg-on-dark: var(--pccc-white);

  --bg-1: var(--pccc-white);         /* canvas */
  --bg-2: var(--pccc-cold-grey-1);   /* surface, cards */
  --bg-3: var(--pccc-cold-grey-2);   /* raised tint */

  --border-1: var(--pccc-cold-grey-2);
  --border-2: var(--pccc-cold-grey-3);

  --accent:        var(--pccc-vivid-indigo);
  --accent-ink:    var(--pccc-white);
  --link:          var(--pccc-vivid-indigo);

  /* ---------- TYPE FAMILIES ---------- */
  --font-sans:      "Roboto", Arial, Helvetica, sans-serif;
  --font-condensed: "Roboto Condensed", "Arial Narrow", "Roboto", Arial, sans-serif;
  --font-fallback:  Arial, Helvetica, sans-serif;
  --font-fallback-condensed: "Arial Narrow", Arial, sans-serif;

  /* ---------- TYPE SCALE (pt → px; pt × 1.333 ≈ px) ---------- */
  /* 50pt H1 → 67px ; 25pt H2 → 33px ; 18pt overline → 24px ; 15pt body/CTA → 20px */
  --fs-h1: 67px;
  --fs-h2: 33px;
  --fs-overline: 24px;
  --fs-body: 20px;
  --fs-cta:  20px;
  --fs-small: 16px;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.55;

  --tracking-overline: 0.06em;
  --tracking-cta:      0.04em;

  /* ---------- SPACING (8pt baseline) ---------- */
  --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;

  /* ---------- RADII (minimal, mostly square brand) ---------- */
  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;

  /* ---------- BORDERS / SHADOWS ---------- */
  --border-w: 1px;
  --hairline: 1px solid var(--border-1);

  --shadow-sm:  0 1px 2px rgba(12, 0, 61, 0.06);
  --shadow-md:  0 4px 16px rgba(12, 0, 61, 0.08);
  --shadow-lg:  0 12px 40px rgba(12, 0, 61, 0.12);

  /* ---------- MOTION ---------- */
  --ease-std:   cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --ease-out:   cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   360ms;
}

/* ============================================================
   DARK MODE — "premium / strategic" variant from the brand book
   Apply by adding `.theme-dark` to a region or setting it on <html>.
   ============================================================ */
.theme-dark {
  --fg-1: var(--pccc-white);
  --fg-2: var(--pccc-cold-grey-2);
  --fg-3: var(--pccc-cold-grey-3);

  --bg-1: var(--pccc-dark-indigo);
  --bg-2: #14064a;        /* +5% lighten of dark indigo, derived */
  --bg-3: var(--pccc-plum);

  --border-1: rgba(255, 255, 255, 0.12);
  --border-2: rgba(255, 255, 255, 0.22);

  --link: var(--pccc-cold-grey-2);
}

/* ============================================================
   SEMANTIC ELEMENTS
   ============================================================ */
html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-condensed);
  font-weight: 600;            /* Roboto Condensed Semibold */
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: -0.005em;
  margin: 0 0 var(--space-5);
}

h2, .h2 {
  font-family: var(--font-sans);
  font-weight: 700;            /* Roboto Bold */
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-4);
}

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 22px;
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-3);
}

p, .body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

.overline {
  font-family: var(--font-condensed);
  font-weight: 400;
  font-size: var(--fs-overline);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--fg-2);
}

.cta, .button {
  font-family: var(--font-condensed);
  font-weight: 400;
  font-size: var(--fs-cta);
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
}

small, .small {
  font-size: var(--fs-small);
  line-height: 1.45;
}

code, kbd, samp, pre {
  font-family: ui-monospace, "SF Mono", "Roboto Mono", Consolas, monospace;
  font-size: 0.92em;
}

a[href] {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: opacity var(--dur-fast) var(--ease-std);
}
a[href]:hover { opacity: 0.7; }

::selection { background: var(--pccc-vivid-indigo); color: #fff; }