/* Harbor Ledger, the portal's theme: roomy controls, 12px cards on soft
   shadows, pill badges, the focus glow and Inter, in pinova.dev's colors
   (paper, brown ink, sanguine and lamp green). Light only. */

@layer themes {
  :root {
    --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
    --font-display: var(--font-sans);
    --font-mono: "JetBrains Mono", ui-monospace, monospace;
    --font-figures: var(--font-sans);
    --text-body: var(--text-md);
    --weight-heading: 650;
    --weight-strong: 600;
    --tracking-heading: -0.018em;
    --tracking-display: -0.03em;

    --canvas: #f8f3e8;
    --surface: #fefcf8;
    --surface-raised: #fffefb;
    --surface-muted: #f3ecdf;
    --surface-hover: #eee5d5;
    --surface-inset: #fffefb;
    --backdrop: oklch(0.25 0.04 60 / 0.3);

    --fg: #33200f;
    --fg-muted: #6b5440;
    --fg-subtle: #7a6450;

    --border: #e6dccb;
    --border-strong: #d3c4ad;
    --border-subtle: #eee6d8;

    --accent: #33200f;
    --accent-hover: #4a3220;
    --on-accent: #fdfbf6;
    --accent-soft: #f3e4d8;
    --on-accent-soft: #8a3521;
    --link: #a3432a;
    --focus: color-mix(in oklab, #a3432a 38%, transparent);
    --focus-width: 3px;
    --focus-offset: 1px;

    --success: #5c7f45;
    --success-soft: #e9eedb;
    --on-success-soft: #3f5a2d;
    --warning: #b07c1e;
    --warning-soft: #f6ead0;
    --on-warning-soft: #6e4c10;
    --danger: #b42d1e;
    --danger-hover: #962417;
    --danger-soft: #f7e1da;
    --on-danger-soft: #8c2416;
    --info: #3f4c52;
    --info-soft: #e4e6e3;
    --on-info-soft: #334046;

    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --shadow-xs: 0 1px 2px oklch(0.35 0.04 60 / 0.07);
    --shadow-sm: 0 1px 2px oklch(0.35 0.04 60 / 0.06), 0 1px 3px oklch(0.35 0.04 60 / 0.06);
    --shadow-md: 0 4px 12px -2px oklch(0.35 0.04 60 / 0.12), 0 2px 4px -2px oklch(0.35 0.04 60 / 0.07);
    --shadow-lg: 0 20px 48px -12px oklch(0.3 0.05 60 / 0.28), 0 4px 10px -4px oklch(0.3 0.04 60 / 0.1);

    --control-h-sm: 1.875rem;
    --control-h: 2.375rem;
    --control-h-lg: 2.875rem;
    --control-px: 0.875rem;
    --control-radius: var(--radius-md);
    --control-border: var(--border-strong);
    --control-shadow: var(--shadow-xs);

    --card-radius: var(--radius-lg);
    --card-border: #e9e0d0;
    --card-shadow: var(--shadow-sm);
    --card-pad: var(--space-6);
    --badge-radius: var(--radius-full);
    --checkbox-radius: 5px;

    --cell-py: 0.75rem;
    --cell-px: 1rem;
    --cell-py-dense: 0.4375rem;
    --th-bg: var(--surface-muted);
    --th-size: var(--text-xs);
    --th-weight: 500;
    --row-hover: #faf6ee;

    --nav-active-bg: var(--accent-soft);
    --nav-active-fg: var(--on-accent-soft);
    --sidebar-bg: var(--surface);
    --tab-indicator: var(--link);

    & .btn-primary { box-shadow: 0 1px 2px oklch(0.3 0.05 60 / 0.3), inset 0 1px 0 oklch(1 0 0 / 0.1); }
    & .input:focus-visible, & .select:focus-visible, & .textarea:focus-visible {
      outline: none;
      border-color: var(--link);
      box-shadow: 0 0 0 3px var(--focus);
    }
  }
}