/* ===================================================================== score:connect — Design Tokens (CSS Custom Properties) Source of truth: tokens.json | Version 1.0.0 Namespace: --sc-* (framework-neutral, safe to import globally) Usage: or Falls kein data-theme gesetzt ist, greift prefers-color-scheme. ===================================================================== */ :root { /* ---- Primitive ramps (mode-stable) ---- */ --sc-neutral-0:#FFFFFF; --sc-neutral-50:#F6F7F9; --sc-neutral-100:#ECEEF1; --sc-neutral-150:#E3E6EA; --sc-neutral-200:#D7DBE0; --sc-neutral-300:#C2C8CF; --sc-neutral-400:#98A1AB; --sc-neutral-500:#6C7480; --sc-neutral-600:#4C535D; --sc-neutral-700:#353B43; --sc-neutral-800:#22262C; --sc-neutral-850:#181B20; --sc-neutral-900:#0F1216; --sc-neutral-950:#0A0C0F; --sc-teal-50:#E7FBF6; --sc-teal-100:#C4F3E9; --sc-teal-200:#92E7D6; --sc-teal-300:#57D4BE; --sc-teal-400:#22BBA4; --sc-teal-500:#0E9E8A; --sc-teal-600:#0B7E6F; --sc-teal-700:#0A655A; --sc-teal-800:#094F47; --sc-teal-900:#063530; /* ---- Typography (mode-independent) ---- */ --sc-font-display:"Inter","Inter Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --sc-font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --sc-font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace; --sc-weight-regular:400; --sc-weight-medium:500; --sc-weight-semibold:600; --sc-weight-bold:700; --sc-text-display-2xl-size:56px; --sc-text-display-2xl-line:60px; --sc-text-display-2xl-tracking:-0.022em; --sc-text-display-xl-size:44px; --sc-text-display-xl-line:48px; --sc-text-display-xl-tracking:-0.021em; --sc-text-display-lg-size:36px; --sc-text-display-lg-line:42px; --sc-text-display-lg-tracking:-0.020em; --sc-text-heading-lg-size:28px; --sc-text-heading-lg-line:34px; --sc-text-heading-lg-tracking:-0.014em; --sc-text-heading-md-size:22px; --sc-text-heading-md-line:28px; --sc-text-heading-md-tracking:-0.012em; --sc-text-heading-sm-size:18px; --sc-text-heading-sm-line:26px; --sc-text-heading-sm-tracking:-0.008em; --sc-text-body-lg-size:16px; --sc-text-body-lg-line:26px; --sc-text-body-lg-tracking:0em; --sc-text-body-md-size:14px; --sc-text-body-md-line:22px; --sc-text-body-md-tracking:0em; --sc-text-body-sm-size:13px; --sc-text-body-sm-line:20px; --sc-text-body-sm-tracking:0em; --sc-text-caption-size:12px; --sc-text-caption-line:16px; --sc-text-caption-tracking:0.002em; --sc-text-overline-size:11px; --sc-text-overline-line:14px; --sc-text-overline-tracking:0.06em; --sc-text-mono-md-size:13px; --sc-text-mono-md-line:20px; --sc-text-mono-sm-size:12px; --sc-text-mono-sm-line:18px; /* ---- Radius ---- */ --sc-radius-none:0px; --sc-radius-xs:4px; --sc-radius-sm:6px; --sc-radius-md:8px; --sc-radius-lg:12px; --sc-radius-xl:16px; --sc-radius-2xl:24px; --sc-radius-full:9999px; /* ---- Spacing (4px base) ---- */ --sc-space-0:0px; --sc-space-0-5:2px; --sc-space-1:4px; --sc-space-1-5:6px; --sc-space-2:8px; --sc-space-3:12px; --sc-space-4:16px; --sc-space-5:20px; --sc-space-6:24px; --sc-space-8:32px; --sc-space-10:40px; --sc-space-12:48px; --sc-space-16:64px; --sc-space-20:80px; --sc-space-24:96px; /* ---- Motion ---- */ --sc-duration-fast:120ms; --sc-duration-base:200ms; --sc-duration-slow:320ms; --sc-ease-standard:cubic-bezier(0.2,0,0,1); --sc-ease-decelerate:cubic-bezier(0.16,1,0.3,1); --sc-ease-accelerate:cubic-bezier(0.4,0,1,1); } /* ========================= LIGHT THEME ========================= */ :root, [data-theme="light"] { --sc-bg-canvas:#F6F7F9; --sc-bg-surface:#FFFFFF; --sc-bg-raised:#FFFFFF; --sc-bg-sunken:#ECEEF1; --sc-bg-inverse:#0F1216; --sc-bg-overlay:rgba(15,18,22,0.45); --sc-text-primary:#0F1216; --sc-text-secondary:#4C535D; --sc-text-muted:#6C7480; --sc-text-disabled:#98A1AB; --sc-text-inverse:#FFFFFF; --sc-border-subtle:#ECEEF1; --sc-border-default:#E3E6EA; --sc-border-strong:#8A929C; --sc-brand-solid:#0B7E6F; --sc-brand-solid-hover:#0A655A; --sc-brand-on-solid:#FFFFFF; --sc-brand-subtle:#E7FBF6; --sc-brand-text:#0A655A; --sc-brand-border:#0B7E6F; --sc-brand-accent:#0B7E6F; --sc-success-solid:#157F45; --sc-success-solid-hover:#126838; --sc-success-on-solid:#FFFFFF; --sc-success-subtle:#E7F6EC; --sc-success-text:#126838; --sc-success-border:#157F45; --sc-warning-solid:#D18708; --sc-warning-solid-hover:#A66A06; --sc-warning-on-solid:#0F1216; --sc-warning-subtle:#FBF1DE; --sc-warning-text:#845405; --sc-warning-border:#D18708; --sc-danger-solid:#C22A2A; --sc-danger-solid-hover:#A02222; --sc-danger-on-solid:#FFFFFF; --sc-danger-subtle:#FCECEC; --sc-danger-text:#A02222; --sc-danger-border:#C22A2A; --sc-info-solid:#1F55BE; --sc-info-solid-hover:#1B4699; --sc-info-on-solid:#FFFFFF; --sc-info-subtle:#E9F1FE; --sc-info-text:#1B4699; --sc-info-border:#1F55BE; --sc-focus-ring:#0B7E6F; --sc-focus-ring-alpha:rgba(11,126,111,0.35); --sc-elevation-0:none; --sc-elevation-1:0 1px 2px rgba(16,18,22,0.06), 0 1px 1px rgba(16,18,22,0.04); --sc-elevation-2:0 2px 4px rgba(16,18,22,0.06), 0 4px 8px rgba(16,18,22,0.06); --sc-elevation-3:0 4px 8px rgba(16,18,22,0.08), 0 12px 24px rgba(16,18,22,0.10); --sc-elevation-4:0 8px 16px rgba(16,18,22,0.10), 0 24px 48px rgba(16,18,22,0.14); } /* ========================= DARK THEME ========================= */ [data-theme="dark"] { --sc-bg-canvas:#0A0C0F; --sc-bg-surface:#0F1216; --sc-bg-raised:#181B20; --sc-bg-sunken:#08090B; --sc-bg-inverse:#F6F7F9; --sc-bg-overlay:rgba(0,0,0,0.60); --sc-text-primary:#F6F7F9; --sc-text-secondary:#C2C8CF; --sc-text-muted:#98A1AB; --sc-text-disabled:#6C7480; --sc-text-inverse:#0F1216; --sc-border-subtle:#181B20; --sc-border-default:#22262C; --sc-border-strong:#606770; --sc-brand-solid:#22BBA4; --sc-brand-solid-hover:#57D4BE; --sc-brand-on-solid:#0A0C0F; --sc-brand-subtle:#0C2F2B; --sc-brand-text:#57D4BE; --sc-brand-border:#22BBA4; --sc-brand-accent:#22BBA4; --sc-success-solid:#3FB56E; --sc-success-solid-hover:#7FCF9A; --sc-success-on-solid:#0A0C0F; --sc-success-subtle:#10241A; --sc-success-text:#7FCF9A; --sc-success-border:#3FB56E; --sc-warning-solid:#E89B1E; --sc-warning-solid-hover:#F0B44E; --sc-warning-on-solid:#0A0C0F; --sc-warning-subtle:#2A2008; --sc-warning-text:#F0B44E; --sc-warning-border:#E89B1E; --sc-danger-solid:#E85C5C; --sc-danger-solid-hover:#F09393; --sc-danger-on-solid:#0A0C0F; --sc-danger-subtle:#2E1414; --sc-danger-text:#F09393; --sc-danger-border:#E85C5C; --sc-info-solid:#4A8DE9; --sc-info-solid-hover:#7FB0F3; --sc-info-on-solid:#0A0C0F; --sc-info-subtle:#0F1E33; --sc-info-text:#7FB0F3; --sc-info-border:#4A8DE9; --sc-focus-ring:#22BBA4; --sc-focus-ring-alpha:rgba(34,187,164,0.40); --sc-elevation-0:none; --sc-elevation-1:0 1px 2px rgba(0,0,0,0.40); --sc-elevation-2:0 2px 6px rgba(0,0,0,0.45); --sc-elevation-3:0 8px 24px rgba(0,0,0,0.55); --sc-elevation-4:0 16px 48px rgba(0,0,0,0.60); } /* Optional: follow OS preference when no data-theme attribute is set */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --sc-bg-canvas:#0A0C0F; --sc-bg-surface:#0F1216; --sc-bg-raised:#181B20; --sc-bg-sunken:#08090B; --sc-bg-inverse:#F6F7F9; --sc-bg-overlay:rgba(0,0,0,0.60); --sc-text-primary:#F6F7F9; --sc-text-secondary:#C2C8CF; --sc-text-muted:#98A1AB; --sc-text-disabled:#6C7480; --sc-text-inverse:#0F1216; --sc-border-subtle:#181B20; --sc-border-default:#22262C; --sc-border-strong:#606770; --sc-brand-solid:#22BBA4; --sc-brand-solid-hover:#57D4BE; --sc-brand-on-solid:#0A0C0F; --sc-brand-subtle:#0C2F2B; --sc-brand-text:#57D4BE; --sc-brand-border:#22BBA4; --sc-brand-accent:#22BBA4; --sc-success-solid:#3FB56E; --sc-success-solid-hover:#7FCF9A; --sc-success-on-solid:#0A0C0F; --sc-success-subtle:#10241A; --sc-success-text:#7FCF9A; --sc-success-border:#3FB56E; --sc-warning-solid:#E89B1E; --sc-warning-solid-hover:#F0B44E; --sc-warning-on-solid:#0A0C0F; --sc-warning-subtle:#2A2008; --sc-warning-text:#F0B44E; --sc-warning-border:#E89B1E; --sc-danger-solid:#E85C5C; --sc-danger-solid-hover:#F09393; --sc-danger-on-solid:#0A0C0F; --sc-danger-subtle:#2E1414; --sc-danger-text:#F09393; --sc-danger-border:#E85C5C; --sc-info-solid:#4A8DE9; --sc-info-solid-hover:#7FB0F3; --sc-info-on-solid:#0A0C0F; --sc-info-subtle:#0F1E33; --sc-info-text:#7FB0F3; --sc-info-border:#4A8DE9; --sc-focus-ring:#22BBA4; --sc-focus-ring-alpha:rgba(34,187,164,0.40); --sc-elevation-1:0 1px 2px rgba(0,0,0,0.40); --sc-elevation-2:0 2px 6px rgba(0,0,0,0.45); --sc-elevation-3:0 8px 24px rgba(0,0,0,0.55); --sc-elevation-4:0 16px 48px rgba(0,0,0,0.60); } }