/* theme.css - tokeny marki AK Service. ZRODLO: docs/design-system/tokens/*.css (AK Service Design System). Plik jest sklejeniem tych tokenow w jeden, zeby uniknac lancucha @import. Przy aktualizacji systemu: podmien docs/design-system/ i przegeneruj ten plik. Nie edytuj wartosci recznie - zrodlem prawdy sa tokeny. tokens/fonts.css pominiety celowo: webfonty ida -iem w . */ /* ---------- tokens/colors.css ---------- */ :root{ /* Primary — magenta (derived from Airquee's pink brand accent, deepened for contrast) */ --pink-50:#FDF2F7;--pink-100:#FCE1EE;--pink-200:#F9BFDB;--pink-300:#F28CBD;--pink-400:#E9569D;--pink-500:#DA2A7F;--pink-600:#C21868;--pink-700:#A00F55;--pink-800:#7C0F44;--pink-900:#5A0F33; /* Secondary — teal (Airquee's teal accent) */ --teal-50:#EFF9F9;--teal-100:#D6F0F0;--teal-200:#ADE0E1;--teal-300:#78C8CA;--teal-400:#43A9AD;--teal-500:#238C91;--teal-600:#1B7176;--teal-700:#1A5B5F;--teal-800:#19494D;--teal-900:#173C40; /* Neutrals — cool slate */ --gray-0:#FFFFFF;--gray-50:#F7F8FA;--gray-100:#EEF0F4;--gray-200:#DFE3EA;--gray-300:#C7CDD8;--gray-400:#9AA3B2;--gray-500:#6B7587;--gray-600:#4E5768;--gray-700:#38404F;--gray-800:#242A36;--gray-900:#141821; /* Semantic */ --green-600:#1F8A4C;--green-100:#DCF3E4;--amber-600:#B36B00;--amber-100:#FCEBCB;--red-600:#C8322B;--red-100:#FBE1DF;--blue-600:#1E63B8;--blue-100:#DDE9F9; /* Aliases — brand */ --color-primary:var(--pink-600);--color-primary-hover:var(--pink-700);--color-primary-active:var(--pink-800);--color-primary-soft:var(--pink-50);--color-primary-soft-border:var(--pink-200); --color-secondary:var(--teal-600);--color-secondary-hover:var(--teal-700);--color-secondary-active:var(--teal-800);--color-secondary-soft:var(--teal-50);--color-secondary-soft-border:var(--teal-200); /* Aliases — text */ --text-heading:var(--gray-900);--text-body:var(--gray-700);--text-muted:var(--gray-500);--text-disabled:var(--gray-400);--text-on-primary:#FFFFFF;--text-on-dark:#FFFFFF;--text-on-dark-muted:rgba(255,255,255,.72);--text-link:var(--teal-600);--text-link-hover:var(--teal-700); /* Aliases — surfaces */ --surface-page:var(--gray-0);--surface-subtle:var(--gray-50);--surface-card:var(--gray-0);--surface-raised:var(--gray-0);--surface-inset:var(--gray-100);--surface-dark:var(--gray-900);--surface-dark-raised:var(--gray-800);--surface-overlay:rgba(20,24,33,.56); /* Aliases — borders */ --border-subtle:var(--gray-100);--border-default:var(--gray-200);--border-strong:var(--gray-300);--border-focus:var(--teal-500); /* Aliases — status */ --status-success:var(--green-600);--status-success-bg:var(--green-100);--status-warning:var(--amber-600);--status-warning-bg:var(--amber-100);--status-danger:var(--red-600);--status-danger-bg:var(--red-100);--status-info:var(--blue-600);--status-info-bg:var(--blue-100); } /* ---------- tokens/typography.css ---------- */ :root{ --font-display:"Sora","Segoe UI",system-ui,sans-serif; --font-body:"Manrope","Segoe UI",system-ui,sans-serif; --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* Sizes */ --text-display:56px;--text-h1:44px;--text-h2:34px;--text-h3:26px;--text-h4:20px;--text-lg:18px;--text-md:16px;--text-sm:14px;--text-xs:12px; /* Line heights */ --leading-display:1.05;--leading-heading:1.15;--leading-body:1.55;--leading-tight:1.3; /* Tracking */ --tracking-display:-0.025em;--tracking-heading:-0.015em;--tracking-body:0;--tracking-caps:0.08em; /* Weights */ --weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700; } /* ---------- tokens/spacing.css ---------- */ :root{ --space-0:0;--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; --container-max:1240px;--container-pad:24px;--section-pad:96px;--grid-gap:24px; --control-h-sm:36px;--control-h-md:44px;--control-h-lg:52px; } /* ---------- tokens/effects.css ---------- */ :root{ --radius-xs:4px;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--radius-pill:999px; --shadow-xs:0 1px 2px rgba(20,24,33,.06); --shadow-sm:0 1px 2px rgba(20,24,33,.05),0 2px 8px rgba(20,24,33,.06); --shadow-md:0 4px 12px rgba(20,24,33,.08),0 12px 32px rgba(20,24,33,.08); --shadow-lg:0 12px 24px rgba(20,24,33,.10),0 32px 64px rgba(20,24,33,.12); --shadow-focus:0 0 0 3px rgba(35,140,145,.30); --ease-standard:cubic-bezier(.2,.0,.0,1); /* @kind other */ --ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */ --duration-fast:120ms; /* @kind other */ --duration-base:200ms; /* @kind other */ --duration-slow:320ms; /* @kind other */ --gradient-protect:linear-gradient(180deg,rgba(20,24,33,0) 30%,rgba(20,24,33,.72) 100%); /* @kind color */ --gradient-brand:linear-gradient(135deg,var(--pink-600),var(--pink-500)); } /* ---------- tokens/base.css ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;font-family:var(--font-body);font-size:var(--text-md);line-height:var(--leading-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased;text-wrap:pretty} h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--font-display);color:var(--text-heading);line-height:var(--leading-heading);letter-spacing:var(--tracking-heading);font-weight:var(--weight-semibold);text-wrap:balance} p{margin:0} a{color:var(--text-link);text-decoration:none;text-underline-offset:3px;transition:color var(--duration-fast) var(--ease-standard)} a:hover{color:var(--text-link-hover);text-decoration:underline} img,svg{display:block;max-width:100%} button,input,select,textarea{font:inherit;color:inherit} :focus-visible{outline:none;box-shadow:var(--shadow-focus)} ::selection{background:var(--pink-100);color:var(--pink-900)}