/* Karelo design tokens. The values come from the Karelo brand kit (BK1-A).
   Screens use these token names, never raw color codes.
   Dark values sit under :root[data-theme="dark"]; nothing switches that on yet. */
:root {
  /* Everyday colors */
  --color-brand: #12A89D;
  --color-brand-text: #0B7A73;
  --color-brand-hover: #0B706B;
  --color-on-brand: #FFFFFF;
  --color-action: #FF7A59;
  --color-action-hover: #E77054;
  --color-on-action: #0E1A24;
  --color-text: #0E1A24;
  --color-text-muted: #5B6B75;
  --color-page: #F5F9F9;
  --color-card: #FFFFFF;
  --color-line: #DCE7E7;
  --color-control-line: #7A8A94;

  /* Status colors */
  --status-success: #3D7A2A;
  --status-success-tint: #EAF3E2;
  --status-warning: #9C5A00;
  --status-warning-tint: #FBF0DC;
  --status-error: #C02A4A;
  --status-error-tint: #FBE6EA;
  --status-info: #1F6A94;
  --status-info-tint: #E3EFF6;
  --status-neutral: #4A5A63;
  --status-neutral-tint: #EEF2F3;

  /* Chart colors, in order */
  --chart-1: #12A89D;
  --chart-2: #0B3D4A;
  --chart-3: #FF7A59;
  --chart-4: #E8A93A;
  --chart-5: #7A8A94;

  /* Sidebar (same in both modes) */
  --sidebar-bg: linear-gradient(180deg, #0A141C 0%, #0B2A33 50%, #0B3D4A 100%);
  --sidebar-line: #1C2E38;
  --sidebar-text: #9AABB3;
  --sidebar-text-strong: #E6EFEF;
  --sidebar-active: #2DD4BF;
  --sidebar-active-bg: rgba(18, 168, 157, 0.15);

  /* Gradients */
  --gradient-tide: linear-gradient(135deg, #0B7A73 0%, #12A89D 50%, #5EEAD4 100%);
  --gradient-deep-water: linear-gradient(135deg, #0E1A24 0%, #0B3D4A 100%);
  --gradient-sidebar: var(--sidebar-bg);
  --gradient-tide-band: linear-gradient(100deg, var(--color-card) 0%, var(--color-card) 52%, #5EEAD4 78%, #12A89D 92%, #0B7A73 100%);

  /* Fonts */
  --font-display: "Funnel Display", system-ui, sans-serif;
  --font-sans: "Funnel Sans", system-ui, sans-serif;
  --font-mono: "Fragment Mono", ui-monospace, monospace;
  --heading-tracking: -0.01em;

  /* Type scale: size / line height / weight */
  --type-h1-size: 28px;     --type-h1-line: 36px;     --type-h1-weight: 700;
  --type-h2-size: 20px;     --type-h2-line: 28px;     --type-h2-weight: 600;
  --type-h3-size: 16px;     --type-h3-line: 24px;     --type-h3-weight: 600;
  --type-body-size: 15px;   --type-body-line: 24px;   --type-body-weight: 400;
  --type-small-size: 13px;  --type-small-line: 18px;  --type-small-weight: 500;
  /* BK17-A — the 12px floor, only for table headers, hints and fine print. */
  --type-caption-size: 12px; --type-caption-line: 16px; --type-caption-weight: 500;
  --type-number-size: 24px; --type-number-line: 32px; --type-number-weight: 600;
  --type-code-size: 13px;   --type-code-line: 18px;   --type-code-weight: 400;

  /* Shape, depth, focus, motion */
  --radius-card: 12px;
  --radius-control: 8px;
  /* AU9-A — one height for every text input, number input, select, searchable
     dropdown, date field and button. 36px was already the most common one
     (every kit button, the Settings and Users inputs). */
  --control-height: 36px;
  --shadow-card: 0 1px 2px rgba(14,26,36,.06), 0 4px 12px rgba(14,26,36,.06);
  --shadow-popover: 0 2px 6px rgba(14,26,36,.08), 0 12px 32px rgba(14,26,36,.12);
  --focus-border: 1.5px solid var(--color-brand);
  --focus-ring: 0 0 0 3px rgba(18,168,157,.20);
  --motion-fast: 150ms;
  --motion-base: 250ms;
  --motion-ease: cubic-bezier(0.2, 0, 0, 1);
}

:root[data-theme="dark"] {
  --color-brand: #2DD4BF;
  --color-brand-text: #2DD4BF;
  --color-brand-hover: #42D8C5;
  --color-on-brand: #0E1A24;
  --color-action: #FF8C6E;
  --color-action-hover: #FF987C;
  --color-text: #E6EFEF;
  --color-text-muted: #9AABB3;
  --color-page: #0E1A24;
  --color-card: #152530;
  --color-line: #1F3A44;

  --status-success: #54A83A;
  --status-success-tint: #1B332F;
  --status-warning: #D97D00;
  --status-warning-tint: #2B2D28;
  --status-error: #E07088;
  --status-error-tint: #302634;
  --status-info: #399DD6;
  --status-info-tint: #173040;
  --status-neutral: #9AABB3;
  --status-neutral-tint: #1F3A44;

  --chart-1: #2DD4BF;
  --chart-2: #E6EFEF;
  --chart-3: #FF8C6E;
  --chart-5: #9AABB3;

  --shadow-card: 0 1px 2px rgba(0,0,0,.30), 0 4px 12px rgba(0,0,0,.30);
  --shadow-popover: 0 2px 6px rgba(0,0,0,.40), 0 12px 32px rgba(0,0,0,.40);
  --focus-ring: 0 0 0 3px rgba(45,212,191,.25);
}