/**
 * Harbor design tokens — required by harbor components and utilities.
 * Load this before harbor component/utility CSS.
 */
:root {
    --stroke: rgba(15, 23, 42, 0.12);
    --stroke-2: rgba(15, 23, 42, 0.08);
    --text: rgba(15, 23, 42, 0.92);
    --muted: rgba(15, 23, 42, 0.64);
    --muted-2: rgba(15, 23, 42, 0.48);
    --accent: #0284c7;
    --accent-2: #7c3aed;
    --radius: 16px;
    --shadow: 0 18px 60px rgba(2, 6, 23, 0.1);
    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --brand-primary: #0d3b4c;
    --brand-primary-soft: #1a5566;
    --brand-primary-muted: rgba(13, 59, 76, 0.12);
    --brand-accent: #c45c26;
    --brand-accent-hover: #a04a1e;
    --brand-accent-muted: rgba(196, 92, 38, 0.15);
    --brand-text: #0d2d38;
    --brand-text-muted: #4a6572;
    --brand-surface: #f0f4f5;
    --brand-surface-elevated: #ffffff;
    --brand-border: #c5d1d6;
    --brand-border-strong: #9badb5;
    --brand-shadow-color: 13, 59, 76;
    --brand-radius: 16px;
    --brand-radius-lg: 30px;
}