/* Tokeny ProstaKoncepcja - kopia 1:1 z prostakoncepcja-design/tokens/*.css
   (kolejność jak w styles.css design systemu). Nie edytować ręcznie - przy zmianie
   tokenów skopiować pliki ponownie. Jedyna różnica: @import Google Fonts z fonts.css
   jest przeniesiony do <link> w index.html, żeby fonty ładowały się równolegle. */

/* === tokens/fonts.css === */
/* ProstaKoncepcja webfonts.
   NOTE: no font binaries were supplied with the brief. These are Google Fonts
   substitutions chosen for the brand (see readme.md > Visual foundations).
   Space Grotesk  - display / wordmark / headings
   IBM Plex Sans  - UI + body (full Polish diacritic coverage)
   IBM Plex Mono  - code, data, labels, meta
   Replace the @import below with self-hosted @font-face rules once real files exist. */

:root{
  --font-display:"Space Grotesk","Helvetica Neue",Helvetica,sans-serif;
  --font-sans:"IBM Plex Sans","Helvetica Neue",Helvetica,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* === tokens/colors.css === */
/* Base palette. Warm paper + graphite ink + one signal colour (Accent vermilion). */
:root{
  /* Ink (warm neutral, cool-free) */
  --ink-950:#111110;
  --ink-900:#1c1b19;
  --ink-800:#2b2a27;
  --ink-700:#403e3a;
  --ink-600:#5c5952;
  --ink-500:#7a766d;
  --ink-400:#9c978d;
  --ink-300:#c0bbb0;
  --ink-200:#ddd8ce;
  --ink-100:#ebe7de;
  --ink-050:#f4f1ea;

  /* Paper */
  --paper-000:#ffffff;
  --paper-050:#faf8f3;
  --paper-100:#f2efe7;

  /* Accent vermilion - the dot */
  --accent-700:#9e2c14;
  --accent-600:#c23a1c;
  --accent-500:#e2492a;
  --accent-400:#f0714f;
  --accent-200:#f9c6b6;
  --accent-050:#fdece6;

  /* Supporting hues, used only for status */
  --green-600:#12704f;
  --green-500:#1a8b64;
  --green-050:#e4f2ec;
  --amber-600:#8a5a05;
  --amber-500:#b87503;
  --amber-050:#fbf0da;
  --crimson-600:#8f1d16;
  --crimson-500:#b3271e;
  --crimson-050:#f9e6e4;
  --blue-600:#23509c;
  --blue-500:#2c5fd8;
  --blue-050:#e6ecf9;
}

/* === tokens/typography.css === */
:root{
  /* Sizes - 1.200 minor third off a 16px body, hand-tuned at the ends */
  --text-2xs:11px;
  --text-xs:12px;
  --text-sm:14px;
  --text-md:16px;
  --text-lg:19px;
  --text-xl:23px;
  --text-2xl:29px;
  --text-3xl:37px;
  --text-4xl:48px;
  --text-5xl:64px;
  --text-6xl:84px;

  --leading-tight:1.05;
  --leading-snug:1.2;
  --leading-normal:1.5;
  --leading-loose:1.65;

  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;

  --tracking-display:-0.025em;
  --tracking-heading:-0.015em;
  --tracking-normal:0em;
  --tracking-label:0.08em;
  --tracking-caps:0.12em;
}

/* === tokens/spacing.css === */
:root{
  /* 4px base. --space-1 is the smallest unit anything is allowed to use. */
  --space-0:0px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;
  --space-32:128px;

  /* Layout */
  --measure:66ch;
  --container-sm:640px;
  --container-md:920px;
  --container-lg:1180px;
  --gutter:24px;
  --gutter-lg:48px;
}

/* === tokens/radii.css === */
:root{
  /* Restrained. Nothing in the brand is squishy. */
  --radius-0:0px;
  --radius-1:2px;
  --radius-2:4px;
  --radius-3:8px;
  --radius-4:12px;
  --radius-full:999px;
}

/* === tokens/elevation.css === */
:root{
  /* Shadows are warm, tight and low-opacity. Never a big soft bloom. */
  --shadow-none:none;
  --shadow-xs:0 1px 1px rgba(28,27,25,.05);
  --shadow-sm:0 1px 2px rgba(28,27,25,.07), 0 1px 1px rgba(28,27,25,.04);
  --shadow-md:0 2px 6px rgba(28,27,25,.08), 0 1px 2px rgba(28,27,25,.05);
  --shadow-lg:0 8px 24px rgba(28,27,25,.10), 0 2px 6px rgba(28,27,25,.06);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,.6);
  --ring-focus:0 0 0 3px rgba(226,73,42,.28);

  --border-width:1px;
  --border-width-thick:2px;
}

/* === tokens/motion.css === */
:root{
  --duration-instant:80ms; /* @kind other */
  --duration-fast:140ms; /* @kind other */
  --duration-base:200ms; /* @kind other */
  --duration-slow:320ms; /* @kind other */
  /* No bounce, no overshoot. Things move like paper being slid, not thrown. */
  --ease-standard:cubic-bezier(.2,0,.2,1); /* @kind other */
  --ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */
  --ease-in:cubic-bezier(.4,0,1,1); /* @kind other */
}

/* === tokens/semantic.css === */
/* Semantic aliases. Product code should reach for these, not the base palette. */
:root{
  --surface-page:var(--paper-050);
  --surface-card:var(--paper-000);
  --surface-sunken:var(--paper-100);
  --surface-inverse:var(--ink-950);
  --surface-accent:var(--accent-500);
  --surface-accent-soft:var(--accent-050);
  --surface-hover:var(--ink-050);
  --surface-active:var(--ink-100);
  --surface-disabled:var(--ink-050);

  --text-body:var(--ink-800);
  --text-heading:var(--ink-950);
  --text-muted:var(--ink-600);
  --text-subtle:var(--ink-500);
  --text-inverse:var(--paper-050);
  --text-accent:var(--accent-600);
  --text-disabled:var(--ink-400);
  --text-link:var(--accent-600);
  --text-link-hover:var(--accent-700);

  --border-subtle:var(--ink-100);
  --border-default:var(--ink-200);
  --border-strong:var(--ink-400);
  --border-inverse:var(--ink-700);
  --border-accent:var(--accent-500);

  --status-success-fg:var(--green-600);
  --status-success-bg:var(--green-050);
  --status-warning-fg:var(--amber-600);
  --status-warning-bg:var(--amber-050);
  --status-danger-fg:var(--crimson-600);
  --status-danger-bg:var(--crimson-050);
  --status-info-fg:var(--blue-600);
  --status-info-bg:var(--blue-050);

  --focus-ring:var(--ring-focus);
}

/* === tokens/base.css === */
/* Minimal element defaults. Consumers get these for free by linking styles.css. */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-sans);font-size:var(--text-md);line-height:var(--leading-normal);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-heading);letter-spacing:var(--tracking-heading);line-height:var(--leading-snug);margin:0}
h1{font-size:var(--text-4xl);letter-spacing:var(--tracking-display);line-height:var(--leading-tight)}
h2{font-size:var(--text-2xl)}
h3{font-size:var(--text-xl)}
h4{font-size:var(--text-lg)}
p{margin:0;text-wrap:pretty}
a{color:var(--text-link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color var(--duration-fast) var(--ease-standard)}
a:hover{color:var(--text-link-hover)}
code,kbd,samp{font-family:var(--font-mono);font-size:.92em}
::selection{background:var(--accent-200);color:var(--ink-950)}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-2)}