/* * SLC theme system * Layer 2: scheme-aware semantic tokens. * Layer 3: component tokens and legacy bridges. * * Keep raw color values in slc-theme-.css. This file only consumes the * active --slc-ref-* contract, so color themes and light/dark schemes can be * switched independently through attributes on . */ /* ===== Layer 2: semantic tokens — Light scheme ===== */ :root:not([data-slc-scheme]), :root[data-slc-scheme="light"] { color-scheme: light; --slc-color-canvas-top: var(--slc-ref-canvas-top); --slc-color-canvas: var(--slc-ref-canvas); --slc-color-surface: var(--slc-ref-surface); --slc-color-surface-muted: var(--slc-ref-surface-muted); --slc-color-surface-strong: var(--slc-ref-surface-strong); --slc-color-ink-strong: var(--slc-ref-ink-strong); --slc-color-ink: var(--slc-ref-ink); --slc-color-ink-muted: var(--slc-ref-ink-muted); --slc-color-accent: var(--slc-ref-accent); --slc-color-action: var(--slc-ref-action); --slc-color-action-hover: var(--slc-ref-action-hover); --slc-color-accent-on-dark: var(--slc-ref-accent-on-dark); --slc-color-on-action: var(--slc-ref-on-action); --slc-color-highlight: var(--slc-ref-highlight); --slc-color-highlight-strong: var(--slc-ref-highlight-strong); --slc-color-on-highlight: var(--slc-ref-ink-strong); --slc-color-content-violet: var(--slc-ref-content-violet); --slc-color-content-warm: var(--slc-ref-content-warm); --slc-color-line: rgb(var(--slc-ref-accent-rgb) / 0.15); --slc-color-line-strong: rgb(var(--slc-ref-accent-rgb) / 0.34); --slc-color-grid: rgb(var(--slc-ref-accent-deep-rgb) / 0.055); --slc-color-glass: rgb(var(--slc-ref-surface-rgb) / 0.8); --slc-color-glass-strong: rgb(var(--slc-ref-surface-rgb) / 0.95); --slc-color-overlay: rgb(var(--slc-ref-ink-rgb) / 0.42); --slc-color-focus-ring: var(--slc-color-action); --slc-color-line-soft: rgb(var(--slc-ref-accent-deep-rgb) / 0.1); --slc-color-dark-panel: var(--slc-ref-steel-900); --slc-color-dark-panel-strong: var(--slc-color-ink-strong); --slc-color-dark-ink: var(--slc-color-on-action); --slc-color-dark-ink-muted: var(--slc-color-accent-on-dark); --slc-shadow-surface: 0 24px 64px rgb(var(--slc-ref-shadow-rgb) / 0.13); --slc-shadow-surface-strong: 0 26px 68px rgb(var(--slc-ref-accent-deep-rgb) / 0.17); --slc-shadow-dialog: 0 22px 65px rgb(var(--slc-ref-ink-rgb) / 0.18); } /* ===== Layer 3: reusable component tokens ===== */ :root { --slc-component-body-background: radial-gradient(circle at 82% 4%, rgb(var(--slc-ref-accent-light-rgb) / 0.12), transparent 30rem), radial-gradient(circle at 7% 38%, rgb(var(--slc-ref-accent-rgb) / 0.07), transparent 34rem), linear-gradient(180deg, var(--slc-color-canvas-top) 0%, var(--slc-color-canvas) 100%); --slc-component-service-background: radial-gradient(circle at 12% 10%, rgb(var(--slc-ref-accent-light-rgb) / 0.1), transparent 30rem), linear-gradient(180deg, var(--slc-color-canvas-top) 0%, var(--slc-color-canvas) 100%); --slc-component-briefing-background: radial-gradient(circle at 14% 24%, rgb(var(--slc-ref-accent-rgb) / 0.1), transparent 31rem), linear-gradient(180deg, var(--slc-color-canvas-top) 0%, var(--slc-color-canvas) 100%); --slc-component-corridor-background: radial-gradient(circle at 50% 32%, rgb(var(--slc-ref-accent-rgb) / 0.1), transparent 34rem), linear-gradient(180deg, var(--slc-color-surface-muted), var(--slc-color-canvas)); --slc-component-inquiry-background: radial-gradient(circle at 78% 30%, rgb(var(--slc-ref-accent-rgb) / 0.1), transparent 32rem), linear-gradient(180deg, var(--slc-color-surface-muted), var(--slc-color-surface)); --slc-component-about-background: linear-gradient(180deg, var(--slc-color-canvas-top) 0%, var(--slc-color-canvas) 100%); --slc-component-regional-background: radial-gradient(circle at 88% 12%, rgb(var(--slc-ref-accent-light-rgb) / 0.09), transparent 32rem), var(--slc-color-canvas); --slc-component-regional-badge-background: linear-gradient( to left, var(--slc-color-surface-strong) 0%, var(--slc-color-surface-muted) 58%, rgb(var(--slc-ref-surface-rgb) / 0.62) 82%, transparent 100% ); --slc-component-regional-badge-shadow: linear-gradient( to left, rgb(var(--slc-ref-accent-rgb) / 0.18) 0%, rgb(var(--slc-ref-accent-light-rgb) / 0.13) 44%, rgb(var(--slc-ref-surface-rgb) / 0.18) 76%, transparent 100% ); --slc-component-regional-badge-sheen: linear-gradient( to left, rgb(var(--slc-ref-white-rgb) / 0.1) 0%, rgb(var(--slc-ref-white-rgb) / 0.2) 48%, transparent 100% ); --slc-component-bento-stage-background: radial-gradient(circle at 50% 40%, rgb(var(--slc-ref-accent-rgb) / 0.08), transparent 42%), var(--slc-color-canvas); --slc-component-bento-card-background: radial-gradient(circle at 18% 0%, rgb(var(--slc-ref-accent-deep-rgb) / 0.055), transparent 46%), linear-gradient(148deg, var(--slc-color-surface) 0%, var(--slc-color-canvas-top) 62%, var(--slc-color-surface-muted) 100%); --slc-component-bento-feature-background: radial-gradient(circle at 50% 0%, rgb(var(--slc-ref-accent-deep-rgb) / 0.06), transparent 46%), linear-gradient(150deg, var(--slc-color-surface) 0%, var(--slc-color-surface-strong) 74%, var(--slc-color-surface-muted) 100%); --slc-component-bento-feature-background-compact: linear-gradient(150deg, var(--slc-color-surface) 0%, var(--slc-color-surface-strong) 72%, var(--slc-color-surface-muted) 100%); --slc-component-footer-background: radial-gradient(circle at 88% 12%, rgb(var(--slc-ref-accent-light-rgb) / 0.1), transparent 34%), radial-gradient(circle at 12% 86%, rgb(var(--slc-ref-accent-rgb) / 0.07), transparent 38%), linear-gradient(135deg, var(--slc-color-canvas-top) 0%, var(--slc-color-surface-muted) 100%); --slc-component-action-bg: var(--slc-color-action); --slc-component-action-bg-hover: var(--slc-color-action-hover); --slc-component-action-fg: var(--slc-color-on-action); --slc-component-highlight-bg: var(--slc-color-highlight); --slc-component-highlight-fg: var(--slc-color-on-highlight); --slc-component-icon-filter: var(--slc-ref-icon-filter); --slc-component-nav-trigger-hover-bg: var(--slc-color-action); --slc-component-nav-trigger-hover-border: var(--slc-color-action); --slc-component-social-hover: var(--slc-color-accent-on-dark); --slc-component-card-shadow: var(--slc-shadow-surface); --slc-component-dialog-shadow: var(--slc-shadow-dialog); --slc-component-service-ring-shadow: 0 5px 12px rgb(var(--slc-ref-shadow-rgb) / 0.16), inset 0 0 0 1px rgb(var(--slc-ref-accent-rgb) / 0.1); /* Service Diagram tokens: component semantics, not page-local colors. */ --slc-component-diagram-watermark: rgb(var(--slc-ref-ink-rgb) / 0.04); --slc-component-diagram-title: var(--slc-color-ink-strong); --slc-component-diagram-lead: var(--slc-color-highlight-strong); --slc-component-diagram-highlight: var(--slc-color-highlight); --slc-component-diagram-accent: var(--slc-color-action); --slc-component-diagram-accent-dark: var(--slc-color-ink-strong); --slc-component-diagram-accent-bright: var(--slc-color-accent-on-dark); --slc-component-diagram-line: rgb(var(--slc-ref-accent-deep-rgb) / 0.26); --slc-component-diagram-node-ring: var(--slc-color-surface-muted); --slc-component-diagram-node-surface: var(--slc-color-surface); --slc-component-diagram-node-shadow: 0 0 0 0.35rem var(--slc-color-surface-muted), 0 6px 13px rgb(var(--slc-ref-shadow-rgb) / 0.22), inset 0 0 0 1px rgb(var(--slc-ref-accent-deep-rgb) / 0.14); --slc-component-diagram-node-shadow-hover: 0 0 0 0.35rem var(--slc-color-surface-muted), 0 10px 24px rgb(var(--slc-ref-shadow-rgb) / 0.25), inset 0 0 0 1px rgb(var(--slc-ref-accent-deep-rgb) / 0.14); --slc-component-diagram-copy: var(--slc-color-ink-muted); } /* ===== Legacy bridge: existing V5/V6 modules consume these names ===== */ :root { --canvas: var(--slc-color-canvas); --surface: var(--slc-color-surface); --surface-muted: var(--slc-color-surface-muted); --surface-blue: var(--slc-color-surface-strong); --steel-950: var(--slc-color-ink-strong); --steel-900: var(--slc-ref-steel-900); --steel-800: var(--slc-color-ink); --steel-700: var(--slc-color-ink); --steel-600: var(--slc-color-ink-muted); --signal: var(--slc-color-action); --signal-strong: var(--slc-color-action-hover); --signal-soft: var(--slc-color-accent); --text: var(--slc-color-ink-strong); --text-soft: var(--slc-color-ink); --text-muted: var(--slc-color-ink-muted); --line: var(--slc-color-line); --line-strong: var(--slc-color-line-strong); --glass: var(--slc-color-glass); --glass-strong: var(--slc-color-glass-strong); --accent: var(--slc-color-action); --accent-bright: var(--slc-color-accent); --accent-deep: var(--slc-color-action-hover); --shadow: var(--slc-shadow-surface); --shadow-blue: var(--slc-shadow-surface-strong); } /* ===== Page application ===== */ html { background: var(--slc-color-canvas); } body { background: var(--slc-component-body-background); color: var(--slc-color-ink-strong); } main#main-content { background: transparent; } .slc-about, .slc-about-shell, .service-section, .briefing-section, .regional-sales, .corridor-section, .inquiry-section { color: var(--slc-color-ink-strong); } .service-section { background: var(--slc-component-service-background); } .briefing-section { background: var(--slc-component-briefing-background); } .corridor-section { background: var(--slc-component-corridor-background); } .inquiry-section { background: var(--slc-component-inquiry-background); } .service-diagram__core-ring { border-color: var(--slc-color-surface-muted); background: var(--slc-color-surface); box-shadow: var(--slc-component-service-ring-shadow); color: var(--slc-color-action); } .tarannom-footer { --footer-ink: var(--slc-color-ink-muted); --footer-title: var(--slc-color-ink-strong); --footer-accent: var(--slc-color-action); --footer-link: var(--slc-color-action-hover); background: var(--slc-component-footer-background); box-shadow: 0 -18px 48px rgb(var(--slc-ref-shadow-rgb) / 0.06); } .tarannom-footer::before { background: linear-gradient(to top, rgb(var(--slc-ref-accent-rgb) / 0.08), transparent); }