/* ============================================================ SmartSide Design System — Design Tokens Marka: SmartSide (smartside.pl) Jedno źródło prawdy. Wklej ten plik na każde narzędzie, ustaw (lub pomiń → systemowy). ============================================================ */ /* ---- Fonty ---- */ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600&family=Roboto+Slab:wght@400;500&family=Roboto+Mono:wght@400;500&display=swap'); /* ============================================================ 1. TOKENY NIEZALEŻNE OD MOTYWU ============================================================ */ :root { /* Typografia */ --ss-font-sans: 'Roboto', system-ui, -apple-system, sans-serif; --ss-font-slab: 'Roboto Slab', Georgia, serif; --ss-font-mono: 'Roboto Mono', ui-monospace, 'SFMono-Regular', monospace; --ss-fw-regular: 400; --ss-fw-medium: 500; --ss-fw-bold: 600; /* Skala typograficzna */ --ss-fs-h1: 2.5rem; /* 40 */ --ss-fs-h2: 1.875rem; /* 30 */ --ss-fs-h3: 1.375rem; /* 22 */ --ss-fs-h4: 1.125rem; /* 18 */ --ss-fs-lead: 1.25rem;/* 20 */ --ss-fs-body: 1rem; /* 16 */ --ss-fs-sm: 0.875rem;/* 14 */ --ss-fs-label: 0.75rem;/* 12 */ --ss-lh-tight: 1.15; --ss-lh-heading: 1.3; --ss-lh-body: 1.6; --ss-ls-tight: -0.02em; --ss-ls-label: 0.08em; /* Marka */ --ss-brand: #FCB813; --ss-brand-hover: #E5A50C; --ss-brand-active: #CC9109; /* Promienie — kanciasty, "inżynierski" charakter */ --ss-radius-sm: 3px; --ss-radius: 5px; --ss-radius-lg: 8px; /* Odstępy */ --ss-space-1: 4px; --ss-space-2: 8px; --ss-space-3: 12px; --ss-space-4: 16px; --ss-space-5: 24px; --ss-space-6: 32px; --ss-space-7: 48px; --ss-space-8: 64px; /* Ruch */ --ss-ease: cubic-bezier(.2,.6,.2,1); --ss-dur: .16s; /* Sygnaturowy pierścień focus (amber, offsetowany) */ --ss-focus-ring: 0 0 0 2px var(--ss-bg), 0 0 0 4px var(--ss-brand); } /* ============================================================ 2. MOTYW JASNY (domyślny) ============================================================ */ :root, [data-theme="light"] { color-scheme: light; --ss-bg: #F2F2F2; --ss-surface: #FFFFFF; --ss-surface-2: #FAFAF7; /* powierzchnia podniesiona / hover tła */ --ss-topbar: #1D1D1B; /* sygnaturowy ciemny topbar w obu trybach */ --ss-topbar-text: #F2F2F2; --ss-text: #1D1D1B; /* 15.1:1 na bg / 16.9:1 na surface */ --ss-text-2: #56564E; /* 7.0:1 na surface */ --ss-text-muted: #6B6B62; /* 5.1:1 na surface */ --ss-text-on-brand:#1D1D1B; /* 9.6:1 na brand */ --ss-border: #DBDBD4; --ss-border-strong: #C4C4BB; /* Stany interaktywne (neutralne) */ --ss-hover: rgba(29,29,27,.05); --ss-active: rgba(29,29,27,.10); --ss-disabled-bg: #E7E7E2; --ss-disabled-text: #A9A9A1; /* Statusy (tekst / tło subtelne) */ --ss-success: #1E7A46; --ss-success-bg: #E4F1E8; --ss-warning: #8A5A00; --ss-warning-bg: #FBEFD3; --ss-error: #C0392B; --ss-error-bg: #F8E5E2; --ss-info: #1F6FB2; --ss-info-bg: #E4EEF7; --ss-shadow-1: 0 1px 2px rgba(29,29,27,.06), 0 1px 3px rgba(29,29,27,.08); --ss-shadow-2: 0 4px 12px rgba(29,29,27,.10), 0 2px 4px rgba(29,29,27,.06); } /* ============================================================ 3. MOTYW CIEMNY ============================================================ */ [data-theme="dark"] { color-scheme: dark; --ss-bg: #151513; --ss-surface: #1D1D1B; --ss-surface-2: #262622; --ss-topbar: #1D1D1B; --ss-topbar-text: #F2F2F2; --ss-text: #F2F2F2; /* 16.3:1 na bg */ --ss-text-2: #B4B4AC; /* 8.9:1 na surface */ --ss-text-muted: #8A8A81; /* 4.9:1 na surface */ --ss-text-on-brand:#1D1D1B; /* 9.0:1 na brand */ --ss-border: #33332E; --ss-border-strong: #45453F; --ss-hover: rgba(242,242,242,.06); --ss-active: rgba(242,242,242,.12); --ss-disabled-bg: #262622; --ss-disabled-text: #63635B; --ss-brand-hover: #FFC633; --ss-brand-active: #E5A50C; --ss-success: #4BB673; --ss-success-bg: #16301F; --ss-warning: #F0C24E; --ss-warning-bg: #332811; --ss-error: #E8695B; --ss-error-bg: #3A1D19; --ss-info: #5AA9E6; --ss-info-bg: #14293A; --ss-shadow-1: 0 1px 2px rgba(0,0,0,.4); --ss-shadow-2: 0 6px 20px rgba(0,0,0,.5); } /* Systemowy: gdy brak data-theme, respektuj preferencję OS */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --ss-bg:#151513; --ss-surface:#1D1D1B; --ss-surface-2:#262622; --ss-text:#F2F2F2; --ss-text-2:#B4B4AC; --ss-text-muted:#8A8A81; --ss-border:#33332E; --ss-border-strong:#45453F; --ss-hover:rgba(242,242,242,.06); --ss-active:rgba(242,242,242,.12); --ss-disabled-bg:#262622; --ss-disabled-text:#63635B; --ss-brand-hover:#FFC633; --ss-brand-active:#E5A50C; --ss-success:#4BB673; --ss-success-bg:#16301F; --ss-warning:#F0C24E; --ss-warning-bg:#332811; --ss-error:#E8695B; --ss-error-bg:#3A1D19; --ss-info:#5AA9E6; --ss-info-bg:#14293A; --ss-shadow-1:0 1px 2px rgba(0,0,0,.4); --ss-shadow-2:0 6px 20px rgba(0,0,0,.5); } } /* ============================================================ 4. RESET / BAZA ============================================================ */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--ss-bg); color: var(--ss-text); font-family: var(--ss-font-sans); font-size: var(--ss-fs-body); line-height: var(--ss-lh-body); -webkit-font-smoothing: antialiased; } a { color: var(--ss-text); text-decoration-color: var(--ss-brand); text-underline-offset: 3px; } a:hover { color: var(--ss-brand-active); } /* Widoczny focus dla nawigacji klawiaturą (sygnaturowy amber ring) */ :where(a,button,input,select,textarea,[tabindex]):focus-visible { outline: none; box-shadow: var(--ss-focus-ring); border-radius: var(--ss-radius-sm); } /* ============================================================ 5. TYPOGRAFIA ============================================================ */ .ss-h1{font:var(--ss-fw-bold) var(--ss-fs-h1)/var(--ss-lh-tight) var(--ss-font-sans);letter-spacing:var(--ss-ls-tight);margin:0;} .ss-h2{font:var(--ss-fw-bold) var(--ss-fs-h2)/var(--ss-lh-heading) var(--ss-font-sans);letter-spacing:var(--ss-ls-tight);margin:0;} .ss-h3{font:var(--ss-fw-bold) var(--ss-fs-h3)/var(--ss-lh-heading) var(--ss-font-sans);margin:0;} .ss-h4{font:var(--ss-fw-bold) var(--ss-fs-h4)/var(--ss-lh-heading) var(--ss-font-sans);margin:0;} .ss-lead{font:var(--ss-fw-regular) var(--ss-fs-lead)/1.5 var(--ss-font-slab);color:var(--ss-text-2);margin:0;} .ss-body{font:var(--ss-fw-regular) var(--ss-fs-body)/var(--ss-lh-body) var(--ss-font-sans);margin:0;} .ss-small{font:var(--ss-fw-regular) var(--ss-fs-sm)/1.5 var(--ss-font-sans);color:var(--ss-text-2);margin:0;} .ss-label{font:var(--ss-fw-medium) var(--ss-fs-label)/1 var(--ss-font-sans);letter-spacing:var(--ss-ls-label);text-transform:uppercase;color:var(--ss-text-muted);} .ss-code{font:var(--ss-fw-regular) var(--ss-fs-sm)/1.5 var(--ss-font-mono);background:var(--ss-surface-2);border:1px solid var(--ss-border);border-radius:var(--ss-radius-sm);padding:.1em .4em;} /* ============================================================ 6. TOPBAR — sygnaturowy komponent ekosystemu ============================================================ */ .ss-topbar{ display:flex;align-items:center;gap:var(--ss-space-5); height:56px;padding:0 var(--ss-space-5); background:var(--ss-topbar);color:var(--ss-topbar-text); border-bottom:3px solid var(--ss-brand); /* sygnaturowy amber underline */ } .ss-brandmark{display:flex;align-items:center;gap:10px;font-weight:var(--ss-fw-bold); font-size:var(--ss-fs-h4);letter-spacing:var(--ss-ls-tight);color:var(--ss-topbar-text);text-decoration:none;} .ss-brandmark__glyph{width:22px;height:22px;background:var(--ss-brand);border-radius:2px; display:inline-block;position:relative;flex:0 0 auto;} .ss-brandmark__glyph::after{content:"";position:absolute;right:4px;bottom:4px;width:6px;height:6px; background:var(--ss-topbar);} /* wcięcie-znak firmowy */ .ss-brandmark small{font:var(--ss-fw-regular) var(--ss-fs-sm)/1 var(--ss-font-slab);opacity:.6;} .ss-nav{display:flex;align-items:center;gap:var(--ss-space-1);margin-left:var(--ss-space-4);} .ss-nav a{position:relative;padding:8px 12px;border-radius:var(--ss-radius-sm); color:rgba(242,242,242,.72);text-decoration:none;font-weight:var(--ss-fw-medium); font-size:var(--ss-fs-sm);transition:color var(--ss-dur) var(--ss-ease),background var(--ss-dur);} .ss-nav a:hover{color:var(--ss-topbar-text);background:rgba(242,242,242,.08);} .ss-nav a[aria-current="page"]{color:var(--ss-topbar-text);} .ss-nav a[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:-2px; height:3px;background:var(--ss-brand);border-radius:2px;} .ss-topbar__spacer{margin-left:auto;} /* Przełącznik motywu */ .ss-theme-toggle{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px; background:rgba(242,242,242,.08);border:1px solid rgba(242,242,242,.14);color:var(--ss-topbar-text); border-radius:var(--ss-radius);cursor:pointer;font:var(--ss-fw-medium) var(--ss-fs-sm)/1 var(--ss-font-sans); transition:background var(--ss-dur);} .ss-theme-toggle:hover{background:rgba(242,242,242,.16);} /* ============================================================ 7. PRZYCISKI ============================================================ */ .ss-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; height:40px;padding:0 18px;border-radius:var(--ss-radius);cursor:pointer; font:var(--ss-fw-medium) var(--ss-fs-sm)/1 var(--ss-font-sans); border:1px solid transparent;transition:all var(--ss-dur) var(--ss-ease);user-select:none;} .ss-btn:active{transform:translateY(1px);} .ss-btn--primary{background:var(--ss-brand);color:var(--ss-text-on-brand);} .ss-btn--primary:hover{background:var(--ss-brand-hover);} .ss-btn--primary:active{background:var(--ss-brand-active);} .ss-btn--secondary{background:var(--ss-surface);color:var(--ss-text);border-color:var(--ss-border-strong);} .ss-btn--secondary:hover{background:var(--ss-surface-2);border-color:var(--ss-text-2);} .ss-btn--ghost{background:transparent;color:var(--ss-text);} .ss-btn--ghost:hover{background:var(--ss-hover);} .ss-btn:disabled,.ss-btn[disabled]{background:var(--ss-disabled-bg);color:var(--ss-disabled-text); border-color:transparent;cursor:not-allowed;transform:none;} /* ============================================================ 8. POLA FORMULARZA ============================================================ */ .ss-field{display:flex;flex-direction:column;gap:6px;} .ss-input,.ss-select,.ss-textarea{ width:100%;background:var(--ss-surface);color:var(--ss-text); border:1px solid var(--ss-border-strong);border-radius:var(--ss-radius); padding:9px 12px;font:var(--ss-fw-regular) var(--ss-fs-sm)/1.4 var(--ss-font-sans); transition:border-color var(--ss-dur),box-shadow var(--ss-dur);} .ss-input::placeholder,.ss-textarea::placeholder{color:var(--ss-text-muted);} .ss-input:focus,.ss-select:focus,.ss-textarea:focus{outline:none;border-color:var(--ss-brand); box-shadow:0 0 0 3px rgba(252,184,19,.28);} .ss-input:disabled{background:var(--ss-disabled-bg);color:var(--ss-disabled-text);cursor:not-allowed;} /* ============================================================ 9. KARTY ============================================================ */ .ss-card{background:var(--ss-surface);border:1px solid var(--ss-border); border-radius:var(--ss-radius-lg);padding:var(--ss-space-5);box-shadow:var(--ss-shadow-1);} .ss-card--accent{position:relative;overflow:hidden;} .ss-card--accent::before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:var(--ss-brand);} /* ============================================================ 10. BADGE / ETYKIETY ============================================================ */ .ss-badge{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px; border-radius:100px;font:var(--ss-fw-medium) var(--ss-fs-label)/1 var(--ss-font-sans); letter-spacing:.02em;border:1px solid transparent;} .ss-badge--brand{background:var(--ss-brand);color:var(--ss-text-on-brand);} .ss-badge--neutral{background:var(--ss-surface-2);color:var(--ss-text-2);border-color:var(--ss-border);} .ss-badge--success{background:var(--ss-success-bg);color:var(--ss-success);} .ss-badge--warning{background:var(--ss-warning-bg);color:var(--ss-warning);} .ss-badge--error{background:var(--ss-error-bg);color:var(--ss-error);} .ss-badge--info{background:var(--ss-info-bg);color:var(--ss-info);} /* ============================================================ 11. ALERTY — sygnaturowy lewy pasek statusu ============================================================ */ .ss-alert{display:flex;gap:12px;padding:14px 16px;border-radius:var(--ss-radius); border:1px solid var(--ss-border);border-left-width:4px;background:var(--ss-surface);} .ss-alert__title{font-weight:var(--ss-fw-medium);margin:0 0 2px;} .ss-alert__body{margin:0;color:var(--ss-text-2);font-size:var(--ss-fs-sm);} .ss-alert--success{border-left-color:var(--ss-success);background:var(--ss-success-bg);} .ss-alert--warning{border-left-color:var(--ss-warning);background:var(--ss-warning-bg);} .ss-alert--error{border-left-color:var(--ss-error);background:var(--ss-error-bg);} .ss-alert--info{border-left-color:var(--ss-info);background:var(--ss-info-bg);} /* ============================================================ 12. TABELA ============================================================ */ .ss-table{width:100%;border-collapse:collapse;font-size:var(--ss-fs-sm); background:var(--ss-surface);border:1px solid var(--ss-border);border-radius:var(--ss-radius-lg);overflow:hidden;} .ss-table th{text-align:left;padding:11px 14px;background:var(--ss-surface-2); font:var(--ss-fw-medium) var(--ss-fs-label)/1 var(--ss-font-sans);letter-spacing:var(--ss-ls-label); text-transform:uppercase;color:var(--ss-text-muted);border-bottom:1px solid var(--ss-border);} .ss-table td{padding:12px 14px;border-bottom:1px solid var(--ss-border);color:var(--ss-text);} .ss-table tbody tr:last-child td{border-bottom:none;} .ss-table tbody tr:hover{background:var(--ss-hover);} /* ============================================================ 13. ZAKŁADKI ============================================================ */ .ss-tabs{display:flex;gap:2px;border-bottom:1px solid var(--ss-border);} .ss-tab{position:relative;padding:10px 16px;background:none;border:none;cursor:pointer; color:var(--ss-text-2);font:var(--ss-fw-medium) var(--ss-fs-sm)/1 var(--ss-font-sans); transition:color var(--ss-dur);} .ss-tab:hover{color:var(--ss-text);} .ss-tab[aria-selected="true"]{color:var(--ss-text);} .ss-tab[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px; height:3px;background:var(--ss-brand);border-radius:2px 2px 0 0;}