/* Arganan brand palette and design tokens.

   Single source of colour. Edit a value here and every surface follows:
   the Tailwind utilities (see @theme inline in application.css), the
   landing page and the mailers.

   - Scales: --ds-brand-*, --ds-neutral-*, --ds-accent-* (50-950). Constant.
   - Roles: primary, accent, text/surface and the status families
     (success, warning, danger, info, neutral, brand), each with
     -bg (subtle fill), -fg (text on that fill), -border, -solid and
     -on-solid. Roles flip under .dark.
   - Every text pair is checked for WCAG AA (4.5:1) by
     script/palette_contrast.rb and test/lib/palette_contrast_test.rb.
     Keep the pairs in that script in sync when you add a role.
   - Live preview in development: /dev/palette.

   Generated from OKLCH (hue 262 brand, 225 info, 150 success, 75 warning,
   25 danger, 195 accent) and written out as hex. */

:root {
  --ds-brand-50: #f3f7fe;
  --ds-brand-100: #e6efff;
  --ds-brand-200: #d0e0fe;
  --ds-brand-300: #aac8ff;
  --ds-brand-400: #72a3fe;
  --ds-brand-500: #427ff7;
  --ds-brand-600: #2564e0;
  --ds-brand-700: #154fc3;
  --ds-brand-800: #144097;
  --ds-brand-900: #173268;
  --ds-brand-950: #0e2043;

  --ds-neutral-50: #f9fafc;
  --ds-neutral-100: #f1f4f7;
  --ds-neutral-200: #e3e7ec;
  --ds-neutral-300: #d0d5db;
  --ds-neutral-400: #9ba2ab;
  --ds-neutral-500: #6a727d;
  --ds-neutral-600: #4e5661;
  --ds-neutral-700: #39404a;
  --ds-neutral-800: #202730;
  --ds-neutral-900: #111820;
  --ds-neutral-950: #060c13;

  --ds-accent-50: #eaf9f8;
  --ds-accent-100: #d5f2f1;
  --ds-accent-200: #ade8e7;
  --ds-accent-300: #7bdad9;
  --ds-accent-400: #43c3c3;
  --ds-accent-500: #03abab;
  --ds-accent-600: #008c8c;
  --ds-accent-700: #067272;
  --ds-accent-800: #015c5c;
  --ds-accent-900: #034a4a;
  --ds-accent-950: #003030;

  --ds-color-primary: #154fc3;
  --ds-color-on-primary: #ffffff;
  --ds-color-primary-hover: #144097;
  --ds-color-accent: #067272;
  --ds-color-on-accent: #ffffff;
  --ds-color-accent-hover: #015c5c;
  --ds-color-accent-warm: #f9ad26;
  --ds-color-bg: #f1f4f7;
  --ds-color-bg-elevated: #ffffff;
  --ds-color-surface-muted: #e3e7ec;
  --ds-color-text: #111820;
  --ds-color-text-soft: #39404a;
  --ds-color-muted: #4e5661;
  --ds-color-border: #d0d5db;
  --ds-color-border-strong: #8a939f;
  --ds-color-link: #154fc3;
  --ds-color-link-hover: #173268;
  --ds-color-focus-ring: #2564e0;
  --ds-color-brand-strong: #144097;

  --ds-success-bg: #e7f9ea;
  --ds-success-fg: #015122;
  --ds-success-border: #b1dfb9;
  --ds-success-solid: #047e39;
  --ds-success-on-solid: #ffffff;

  --ds-warning-bg: #fff1df;
  --ds-warning-fg: #6b3900;
  --ds-warning-border: #eccb9e;
  --ds-warning-solid: #f9ad26;
  --ds-warning-on-solid: #301d00;

  --ds-danger-bg: #fef0ee;
  --ds-danger-fg: #751f1f;
  --ds-danger-border: #fcc0ba;
  --ds-danger-solid: #af3c3a;
  --ds-danger-on-solid: #ffffff;

  --ds-info-bg: #e5f7ff;
  --ds-info-fg: #004a5f;
  --ds-info-border: #9fdbf4;
  --ds-info-solid: #027493;
  --ds-info-on-solid: #ffffff;

  --ds-neutral-bg: #f1f4f7;
  --ds-neutral-fg: #3b434d;
  --ds-neutral-border: #cdd1d8;
  --ds-neutral-solid: #616a75;
  --ds-neutral-on-solid: #ffffff;

  --ds-brand-bg: #eef4ff;
  --ds-brand-fg: #1c3e81;
  --ds-brand-border: #b9d2ff;
  --ds-brand-solid: #154fc3;
  --ds-brand-on-solid: #ffffff;

  /* Legacy single-value names kept for the landing and mailers. */
  --ds-color-success: var(--ds-success-solid);
  --ds-color-warning: var(--ds-warning-solid);
  --ds-color-danger: var(--ds-danger-solid);
  --ds-color-info: var(--ds-info-solid);

  color-scheme: light;

  --ds-font-display: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ds-font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ds-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* none = empty slot. Set url("...") when a logo file exists. */
  --ds-logo-mark: none;
  --ds-logo-wordmark: "arganan";

  --color-primary: var(--ds-color-primary);
  --color-on-primary: var(--ds-color-on-primary);
  --color-accent: var(--ds-color-accent);
  --color-on-accent: var(--ds-color-on-accent);
  --color-accent-warm: var(--ds-color-accent-warm);
  --color-bg: var(--ds-color-bg);
  --color-bg-elevated: var(--ds-color-bg-elevated);
  --color-surface-muted: var(--ds-color-surface-muted);
  --color-text: var(--ds-color-text);
  --color-muted: var(--ds-color-muted);
  --color-border: var(--ds-color-border);
  --color-border-strong: var(--ds-color-border-strong);
  --color-success: var(--ds-color-success);
  --color-warning: var(--ds-color-warning);
  --color-danger: var(--ds-color-danger);

  --font-display: var(--ds-font-display);
  --font-body: var(--ds-font-body);
  --font-mono: var(--ds-font-mono);

  --logo-mark: var(--ds-logo-mark);
  --logo-wordmark: var(--ds-logo-wordmark);

  --background: var(--ds-color-bg-elevated);
  --foreground: var(--ds-color-text);
  --primary: var(--ds-color-primary);
  --accent: var(--ds-color-accent);
}

/* Dark values. Nothing toggles .dark in the app yet; /dev/palette uses it
   on a wrapper to preview both themes side by side. */
.dark {
  --ds-color-primary: #72a3fe;
  --ds-color-on-primary: #0e2043;
  --ds-color-primary-hover: #aac8ff;
  --ds-color-accent: #43c3c3;
  --ds-color-on-accent: #003030;
  --ds-color-accent-hover: #7bdad9;
  --ds-color-accent-warm: #e19b1b;
  --ds-color-bg: #0b1016;
  --ds-color-bg-elevated: #151a21;
  --ds-color-surface-muted: #20262d;
  --ds-color-text: #f1f4f7;
  --ds-color-text-soft: #d0d5db;
  --ds-color-muted: #9ba2ab;
  --ds-color-border: #2d333b;
  --ds-color-border-strong: #5c646f;
  --ds-color-link: #aac8ff;
  --ds-color-link-hover: #d0e0fe;
  --ds-color-focus-ring: #72a3fe;
  --ds-color-brand-strong: #aac8ff;

  --ds-success-bg: #15301b;
  --ds-success-fg: #ade9b8;
  --ds-success-border: #295935;
  --ds-success-solid: #5ac576;
  --ds-success-on-solid: #021c09;

  --ds-warning-bg: #372508;
  --ds-warning-fg: #fbd094;
  --ds-warning-border: #664610;
  --ds-warning-solid: #e19b1b;
  --ds-warning-on-solid: #221200;

  --ds-danger-bg: #3e1e1c;
  --ds-danger-fg: #fec8c3;
  --ds-danger-border: #733a36;
  --ds-danger-solid: #fb817a;
  --ds-danger-on-solid: #290b0a;

  --ds-info-bg: #042e3b;
  --ds-info-fg: #9fe3fe;
  --ds-info-border: #00566e;
  --ds-info-solid: #02bced;
  --ds-info-on-solid: #001924;

  --ds-neutral-bg: #26292e;
  --ds-neutral-fg: #d3d8de;
  --ds-neutral-border: #494d54;
  --ds-neutral-solid: #a5abb4;
  --ds-neutral-on-solid: #0c1723;

  --ds-brand-bg: #1b2942;
  --ds-brand-fg: #c3d8ff;
  --ds-brand-border: #344c79;
  --ds-brand-solid: #72a3fe;
  --ds-brand-on-solid: #0e2043;

  --ds-color-success: var(--ds-success-solid);
  --ds-color-warning: var(--ds-warning-solid);
  --ds-color-danger: var(--ds-danger-solid);
  --ds-color-info: var(--ds-info-solid);
  color-scheme: dark;
}