:root {

--canvas: #0C0E13;
--panel: #14171F;
--panel-hi: #1C2029;
--panel-deep: #090B0F;

--text-primary: #ECEAE5;
--text-secondary: #9BA1AE;
--text-faint: #6B7280;

--accent: #C2402A;
--accent-hover: #D9553C;

--accent-text: #D9553C;
--accent-muted: #4A2018;
--accent-ink: #FFFFFF;

--gold: #CCB053;
--gold-muted: #6B5B2C;

--hairline: #232833;
--border-int: #39404E;
--border-field: #6B7280;

--ok: #4E9A6B;
--warn: #C9922F;

--error: #F08A78;

--ink: #1C2029;
--ink-soft: var(--text-secondary);
--paper: var(--canvas);
--paper-2: var(--panel);
--muted: var(--text-secondary);
--line: var(--hairline);
--bg: var(--canvas);
--bg-elevated: var(--panel);
--bg-sunken: var(--panel-deep);
--text: var(--text-primary);
--text-soft: var(--text-secondary);
--border: var(--hairline);
--muted-on-dark: var(--text-secondary);
--accent-dark: #9F3622;
--accent-warm: var(--gold);
--volt: var(--accent);
--volt-ink: var(--accent-ink);
--coral: var(--accent);
--olive: var(--panel);
--used: var(--gold);
--new: var(--accent);

--radius: 12px;
--radius-sm: 8px;
--radius-lg: 22px;
--container: 1280px;
--gutter: clamp(16px, 4vw, 40px);

--shadow: 0 26px 60px -30px rgba(0, 0, 0, .9);
--shadow-sm: 0 10px 26px -16px rgba(0, 0, 0, .8);
--lift: inset 0 1px 0 rgba(236, 234, 229, .06);

--font-display: "Bricolage Grotesque", "Archivo", system-ui, sans-serif;
--font-body: "Public Sans", system-ui, -apple-system, sans-serif;
--font-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
--font-head: var(--font-display);

--ease: cubic-bezier(.22, .61, .36, 1);
--ease-soft: cubic-bezier(.32, .72, .28, 1);

--tshadow:
0 1px 2px rgba(4, 6, 11, .95),
0 3px 12px rgba(4, 6, 11, .78),
0 10px 44px rgba(4, 6, 11, .8);
}
:root {
--wc-form-color-background: var(--panel-deep);
--wc-form-color-text: var(--text-primary);
--wc-form-border-color: var(--border-field);
--wc-form-border-width: 1px;
--wc-form-border-radius: var(--radius-sm);
--wc-content-bg: var(--panel);
--wc-card-border-radius: var(--radius);
--wc-primary: var(--accent);
--wc-primary-text: #fff;
--wc-secondary: var(--panel-hi);
--wc-secondary-text: var(--text-primary);
--wc-highlight: var(--gold);
--wc-highligh-text: var(--canvas);
--wc-subtext: var(--text-secondary);

--wc-green: var(--ok);

--wc-red: var(--accent-text);
--wc-orange: var(--gold);
--wc-blue: #6d8fb8;
--wc-destructive: var(--accent);
}
:root {

--ctl-h: 50px;
--ctl-h-sm: 40px;
--ctl-h-lg: 58px;
--ctl-px: 24px;
--ctl-px-sm: 18px;
--ctl-px-lg: 30px;
--ctl-fs: .9rem;
--ctl-fs-sm: .8rem;
--ctl-fs-lg: .95rem;

--ctl-cut-x: 18px;
--ctl-cut-y: 10px;
--ctl-shape: polygon(0 0, calc(100% - 18px) 0, 100% 10px, 100% 100%, 0 100%);

--ctl-icon: 36px;

--ring: 0 0 0 2px var(--canvas), 0 0 0 4px var(--accent);
}