/* ========================================================================= ITSCOUT Books — Design Tokens Romanian SaaS contabilitate · import/export · ANAF · WinMENTOR pipeline Light-first, dark via [data-theme="dark"] on or ========================================================================= */ /* ---------- LIGHT (default) ---------- */ :root, :root[data-theme="light"] { /* Surfaces — warm whites, near-paper */ --surface-0: #F7F7F8; /* page / canvas */ --surface-1: #FFFFFF; /* card */ --surface-2: #F1F2F5; /* table head, inset */ --surface-3: #E5E7EC; /* hover */ --surface-4: #D5D8DF; /* dividers, input border */ /* Foreground — true grayscale, no blue tint */ --fg-1: #0E1116; --fg-2: #2C313B; --fg-3: #5A6473; --fg-4: #8A93A1; --fg-5: #B5BAC4; /* Brand — ITSCOUT red (sampled from logo: pure #FF0000) */ --brand-50: #FFF1F1; --brand-100: #FFDDDD; --brand-200: #FFB8B8; --brand-300: #FF7878; --brand-400: #FF3D3D; --brand-500: #FF0000; /* signature — logo red */ --brand-600: #D40000; --brand-700: #A30000; --brand-bg: rgba(255,0,0,0.06); --brand-bd: rgba(255,0,0,0.30); /* Primary — alias of brand for buttons */ --primary-50: var(--brand-50); --primary-100: var(--brand-100); --primary-300: var(--brand-300); --primary-400: var(--brand-400); --primary-500: var(--brand-500); --primary-600: var(--brand-600); --primary-700: var(--brand-700); --primary-tint-bg: var(--brand-bg); --primary-tint-bd: var(--brand-bd); /* Ink — secondary action color (near-black for contrast against brand red) */ --ink-500: #0E1116; --ink-600: #000000; /* Semantic */ --success-300: #34C77A; --success-500: #1B9E58; --success-700: #0F6B3B; --success-bg: rgba(27,158,88,0.10); --success-bd: rgba(27,158,88,0.30); --warning-300: #F0B23E; --warning-500: #D9881C; --warning-700: #9A5C0E; --warning-bg: rgba(217,136,28,0.10); --warning-bd: rgba(217,136,28,0.35); --danger-300: #F26C73; --danger-500: #D72631; --danger-700: #9C1A22; --danger-bg: rgba(215,38,49,0.08); --danger-bd: rgba(215,38,49,0.30); --info-300: #4FB1D8; --info-500: #1E7FA8; --info-bg: rgba(30,127,168,0.08); --info-bd: rgba(30,127,168,0.30); /* Entity hues (PJ / PF / PFA) — desaturated so red stays signature */ --pj-300: #1B9E58; --pj-bg: rgba(27,158,88,0.10); --pj-bd: rgba(27,158,88,0.30); --pf-300: #6D5BD0; --pf-bg: rgba(109,91,208,0.10); --pf-bd: rgba(109,91,208,0.30); --pfa-300: #B07013; --pfa-bg: rgba(176,112,19,0.10); --pfa-bd: rgba(176,112,19,0.30); /* Borders */ --border-1: 1px solid rgba(14,17,22,0.08); --border-1-hi: 1px solid rgba(14,17,22,0.16); --border-1-pri:1px solid var(--brand-500); /* Shadows */ --shadow-inset-hi: inset 0 1px 0 rgba(255,255,255,0.6); --shadow-card: 0 1px 2px rgba(14,17,22,0.04), 0 0 0 1px rgba(14,17,22,0.04); --shadow-pop: 0 12px 32px rgba(14,17,22,0.10), 0 2px 6px rgba(14,17,22,0.06); --shadow-cta: 0 6px 18px rgba(255,0,0,0.28); } /* ---------- DARK ---------- */ :root[data-theme="dark"] { --surface-0: #0B0D11; --surface-1: #14171D; --surface-2: #1B1F27; --surface-3: #262B36; --surface-4: #3A4150; --fg-1: #F5F6F8; --fg-2: #D5D8DF; --fg-3: #9AA3B2; --fg-4: #6B7383; --fg-5: #4A5160; /* Brand — same red (it's the constant) but paired with darker tints for fills */ --brand-bg: rgba(255,0,0,0.16); --brand-bd: rgba(255,0,0,0.45); --primary-tint-bg: var(--brand-bg); --primary-tint-bd: var(--brand-bd); --ink-500: #F5F6F8; --ink-600: #FFFFFF; --success-bg: rgba(52,199,122,0.16); --success-bd: rgba(52,199,122,0.40); --warning-bg: rgba(240,178,62,0.16); --warning-bd: rgba(240,178,62,0.40); --danger-bg: rgba(242,108,115,0.16); --danger-bd: rgba(242,108,115,0.40); --info-bg: rgba(79,177,216,0.16); --info-bd: rgba(79,177,216,0.40); --pj-bg: rgba(52,199,122,0.16); --pj-bd: rgba(52,199,122,0.40); --pf-bg: rgba(165,148,232,0.16); --pf-bd: rgba(165,148,232,0.40); --pfa-bg: rgba(240,178,62,0.16); --pfa-bd: rgba(240,178,62,0.40); --pj-300: #34C77A; --pf-300: #A594E8; --pfa-300: #F0B23E; --border-1: 1px solid rgba(255,255,255,0.06); --border-1-hi: 1px solid rgba(255,255,255,0.14); --shadow-inset-hi: inset 0 1px 0 rgba(255,255,255,0.04); --shadow-card: 0 1px 2px rgba(0,0,0,0.30), 0 0 0 1px rgba(255,255,255,0.03); --shadow-pop: 0 12px 32px rgba(0,0,0,0.50), 0 2px 6px rgba(0,0,0,0.30); --shadow-cta: 0 6px 18px rgba(255,0,0,0.45); } /* ---------- TYPE / SCALE / SPACING / RADII / MOTION (theme-agnostic) ---------- */ :root { --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace; --font-display:var(--font-sans); --fs-12: 0.75rem; --fs-13: 0.8125rem; --fs-14: 0.875rem; --fs-16: 1rem; --fs-18: 1.125rem; --fs-20: 1.25rem; --fs-24: 1.5rem; --fs-30: 1.875rem; --fs-36: 2.25rem; --fs-48: 3rem; --fs-64: 4rem; --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.625; --tracking-tight: -0.015em; --tracking-wide: 0.04em; --tracking-wider: 0.10em; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-std: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 280ms; --z-nav: 50; --z-pop: 100; --z-modal: 200; --z-toast: 300; } /* ========================================================================= Semantic shorthands ========================================================================= */ html, body { background: var(--surface-0); color: var(--fg-1); font-family: var(--font-sans); font-size: var(--fs-14); line-height: var(--lh-normal); font-feature-settings: "tnum" 1, "ss01" 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .h-display { font-family: var(--font-sans); font-weight: 900; font-size: var(--fs-48); line-height: var(--lh-tight); letter-spacing: -0.025em; color: var(--fg-1); } .h1, h1.ds { font-size: var(--fs-30); font-weight: 800; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg-1); } .h2, h2.ds { font-size: var(--fs-20); font-weight: 700; line-height: var(--lh-snug); color: var(--fg-1); } .h3, h3.ds { font-size: var(--fs-16); font-weight: 600; color: var(--fg-1); } .eyebrow { font-size: var(--fs-12); font-weight: 700; line-height: 1.2; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--brand-500); } .eyebrow--muted { color: var(--fg-3); } .body { font-size: var(--fs-14); line-height: var(--lh-normal); color: var(--fg-2); } .meta { font-size: var(--fs-12); line-height: var(--lh-normal); color: var(--fg-3); } .mono, code, kbd, samp, pre, .num { font-family: var(--font-mono); font-feature-settings: "tnum" 1, "zero" 1; } .num-lg { font-family: var(--font-mono); font-size: var(--fs-30); font-weight: 700; line-height: 1; letter-spacing: var(--tracking-tight); color: var(--fg-1); } .num-xl { font-family: var(--font-mono); font-size: var(--fs-48); font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--fg-1); } /* ---------- Card ---------- */ .card { background: var(--surface-1); border: var(--border-1); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-inset-hi), var(--shadow-card); transition: border-color var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std); } .card:hover { border-color: var(--surface-4); } .card.is-interactive:hover { border-color: var(--brand-500); } /* Brand-edge card — signature accent at top */ .card--brand { position: relative; overflow: hidden; } .card--brand::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--brand-500); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.5625rem 0.9375rem; border-radius: var(--radius-md); font-size: var(--fs-14); font-weight: 600; line-height: 1; border: 1px solid transparent; background: var(--surface-2); color: var(--fg-1); cursor: pointer; transition: background var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std), transform var(--dur-fast) var(--ease-std), box-shadow var(--dur-fast) var(--ease-std); } .btn:hover { background: var(--surface-3); border-color: var(--surface-4); } .btn:active { transform: translateY(0.5px); } .btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface-0), 0 0 0 4px var(--brand-500); } .btn--primary { background: var(--brand-500); color: white; border-color: var(--brand-500); } .btn--primary:hover { background: var(--brand-600); border-color: var(--brand-600); box-shadow: var(--shadow-cta); } .btn--ink { background: var(--ink-500); color: var(--surface-1); border-color: var(--ink-500); } .btn--ink:hover { background: var(--ink-600); } .btn--success { background: var(--success-500); color: white; border-color: var(--success-500); } .btn--success:hover { background: var(--success-700); } .btn--danger { background: var(--danger-500); color: white; border-color: var(--danger-500); } .btn--danger:hover { background: var(--danger-700); } .btn--ghost { background: transparent; color: var(--fg-2); } .btn--ghost:hover { background: var(--surface-2); color: var(--fg-1); } .btn--outline { background: transparent; color: var(--brand-500); border-color: var(--brand-500); } .btn--outline:hover { background: var(--brand-bg); } .btn--sm { padding: 0.375rem 0.6875rem; font-size: var(--fs-13); } .btn--lg { padding: 0.75rem 1.25rem; font-size: var(--fs-16); } /* ---------- Pills ---------- */ .pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: var(--radius-full); font-size: var(--fs-12); font-weight: 600; line-height: 1.5; border: 1px solid transparent; } .pill--brand { background: var(--brand-bg); border-color: var(--brand-bd); color: var(--brand-500); } .pill--pj { background: var(--pj-bg); border-color: var(--pj-bd); color: var(--pj-300); } .pill--pf { background: var(--pf-bg); border-color: var(--pf-bd); color: var(--pf-300); } .pill--pfa { background: var(--pfa-bg); border-color: var(--pfa-bd); color: var(--pfa-300); } .pill--success { background: var(--success-bg); border-color: var(--success-bd); color: var(--success-500); } .pill--warning { background: var(--warning-bg); border-color: var(--warning-bd); color: var(--warning-500); } .pill--danger { background: var(--danger-bg); border-color: var(--danger-bd); color: var(--danger-500); } .pill--info { background: var(--info-bg); border-color: var(--info-bd); color: var(--info-500); } .pill--neutral { background: var(--surface-2); border-color: var(--surface-4); color: var(--fg-3); } :root[data-theme="dark"] .pill--success { color: var(--success-300); } :root[data-theme="dark"] .pill--warning { color: var(--warning-300); } :root[data-theme="dark"] .pill--danger { color: var(--danger-300); } :root[data-theme="dark"] .pill--info { color: var(--info-300); } :root[data-theme="dark"] .pill--brand { color: #FF8A91; } /* ---------- Inputs ---------- */ .input, .select, .textarea { width: 100%; background: var(--surface-1); border: 1px solid var(--surface-4); border-radius: var(--radius-md); padding: 0.5625rem 0.8125rem; font-size: var(--fs-14); color: var(--fg-1); font-family: inherit; transition: border-color var(--dur-fast) var(--ease-std), box-shadow var(--dur-fast) var(--ease-std); } .input::placeholder { color: var(--fg-4); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-bg); } .input--mono, .input.num { font-family: var(--font-mono); } .label { display: block; font-size: var(--fs-13); font-weight: 600; color: var(--fg-2); margin-bottom: 6px; } .help { font-size: var(--fs-12); color: var(--fg-4); margin-top: 4px; } /* ---------- Table ---------- */ .tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-14); } .tbl thead th { background: var(--surface-2); text-align: left; padding: 10px 14px; font-size: var(--fs-12); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--fg-3); border-bottom: 1px solid var(--surface-4); } .tbl tbody td { padding: 12px 14px; border-bottom: 1px solid var(--surface-3); color: var(--fg-2); } .tbl tbody tr:hover td { background: var(--surface-2); } /* ---------- Callouts ---------- */ .callout { background: var(--brand-bg); border: 1px solid var(--brand-bd); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: var(--fs-13); color: var(--fg-2); } .callout--success { background: var(--success-bg); border-color: var(--success-bd); } .callout--warning { background: var(--warning-bg); border-color: var(--warning-bd); } .callout--danger { background: var(--danger-bg); border-color: var(--danger-bd); } .callout--info { background: var(--info-bg); border-color: var(--info-bd); } /* ---------- Breadcrumb ---------- */ .breadcrumb { font-size: var(--fs-13); color: var(--fg-3); } .breadcrumb a { color: var(--fg-3); text-decoration: none; } .breadcrumb a:hover { color: var(--brand-500); } .breadcrumb .sep { margin: 0 8px; color: var(--fg-5); } .breadcrumb .current { color: var(--fg-1); font-weight: 600; } /* ---------- Brand bar (signature) ---------- */ .brandbar { height: 3px; background: var(--brand-500); width: 100%; } /* ---------- Utility ---------- */ .divider { height: 1px; background: var(--surface-3); width: 100%; } .scrollbox { max-height: 360px; overflow: auto; } .kbd { display: inline-block; padding: 1px 6px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--surface-4); font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); }