/*
 * PMI Dojo design tokens: the single source for colours, type, spacing, radii,
 * shadows and layers. Colours follow pmi.ag (accent #9AC320, text #383D42,
 * blue #006B99). Every text colour reaches at least 4.5:1 on its surfaces.
 *
 * Components use the --color-* / --space-* / ... tokens. The short legacy names
 * further down (--ink, --muted, --brand, ...) are aliases for the existing CSS
 * and disappear once it has been migrated.
 */

:root {
  color-scheme: light;

  /* Brand */
  --color-accent: #9ac320;
  --color-accent-strong: #4f7600; /* green text and hover on light surfaces */
  --color-accent-soft: #eef6d8;
  --color-on-accent: #1f2326; /* text on the accent green, 7.7:1 */
  --color-highlight: #f76644; /* pmi.ag orange, decoration only (3:1 on white) */

  /* Surfaces and text */
  --color-bg: #f5f6f3;
  --color-surface: #ffffff;
  --color-surface-subtle: #f8f9f7;
  --color-surface-muted: #f0f2ee;
  --color-surface-hover: #e9ece6;
  --color-surface-inverse: #383d42;
  --color-border: #dde2dd;
  --color-border-strong: #c6cdc7;
  --color-text: #383d42;
  --color-text-strong: #24282c;
  --color-text-muted: #5d656b;
  --color-text-inverse: #ffffff;
  --color-backdrop: rgba(28, 31, 34, 0.48);

  /* Status */
  --color-success: #23703f;
  --color-success-soft: #e6f4ea;
  --color-warning: #8a5300;
  --color-warning-soft: #fff3d6;
  --color-danger: #b42318;
  --color-danger-soft: #fdecea;
  --color-info: #006b99;
  --color-info-soft: #e3f1f8;
  --color-neutral: #5d656b;
  --color-neutral-soft: #eceeec;

  --focus-ring: #3f6200;

  /* Typography: system font (no Swiza licence), six sizes, three weights */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 15px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --weight-regular: 400;
  --weight-medium: 600;
  --weight-bold: 700;
  --line-tight: 1.25;
  --line-normal: 1.5;

  /* Spacing: 4px grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* Shape and depth */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(36, 40, 44, 0.06);
  --shadow-md: 0 8px 22px rgba(36, 40, 44, 0.08);
  --shadow-lg: 0 18px 45px rgba(36, 40, 44, 0.14);

  /* Sizes */
  --control-height: 40px;
  --button-height: 38px;
  --icon-size: 16px;
  --icon-button-size: 36px;
  --icon-button-compact-size: 32px;

  /* Layers */
  --z-sticky: 20;
  --z-sidebar: 40;
  --z-dropdown: 1000;
  --z-dialog: 2000;
  --z-toast: 3000;
  --z-skip-link: 10000;

  /* Breakpoints (for reference; media queries cannot read variables):
     phone < 640px, tablet < 1024px, desktop >= 1024px. */
}

body.theme-dark {
  color-scheme: dark;

  --color-accent: #9ac320;
  --color-accent-strong: #b5dc4b;
  --color-accent-soft: rgba(154, 195, 32, 0.16);
  --color-on-accent: #1b1f23;

  --color-bg: #111416;
  --color-surface: #181c1f;
  --color-surface-subtle: #1c2124;
  --color-surface-muted: #1f2427;
  --color-surface-hover: #262c30;
  --color-surface-inverse: #eef1f2;
  --color-border: rgba(255, 255, 255, 0.12);
  --color-border-strong: rgba(255, 255, 255, 0.2);
  --color-text: #eef1f2;
  --color-text-strong: #f7f9fa;
  --color-text-muted: #a3acb2;
  --color-text-inverse: #111416;
  --color-backdrop: rgba(0, 0, 0, 0.6);

  --color-success: #62c98e;
  --color-success-soft: rgba(98, 201, 142, 0.16);
  --color-warning: #f2b84b;
  --color-warning-soft: rgba(242, 184, 75, 0.16);
  --color-danger: #ff8b7b;
  --color-danger-soft: rgba(255, 139, 123, 0.16);
  --color-info: #62b6e0;
  --color-info-soft: rgba(98, 182, 224, 0.16);
  --color-neutral: #a3acb2;
  --color-neutral-soft: rgba(255, 255, 255, 0.08);

  --focus-ring: #b6e34a;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 18px 45px rgba(0, 0, 0, 0.4);
}

/*
 * Legacy aliases. Declared on body so that they resolve against the theme
 * tokens above (a custom property is computed where it is declared).
 */
body {
  --bg: var(--color-bg);
  --panel: var(--color-surface);
  --panel-solid: var(--color-surface);
  --panel-soft: var(--color-surface-muted);
  --surface: var(--color-surface);
  --surface-app: var(--color-bg);
  --surface-muted: var(--color-surface-muted);
  --surface-panel: var(--color-surface);
  --surface-hover: var(--color-surface-hover);
  --surface-ring: var(--color-accent-soft);
  --ink: var(--color-text);
  --charcoal: var(--color-text-strong);
  --charcoal-2: var(--color-text);
  --text-default: var(--color-text);
  --color-primary: var(--color-accent-strong);
  --muted: var(--color-text-muted);
  --text-muted: var(--color-text-muted);
  --line: var(--color-border);
  --border: var(--color-border);
  --border-default: var(--color-border);
  --border-subtle: var(--color-border);
  --brand: var(--color-accent);
  --brand-dark: var(--color-accent-strong);
  --brand-soft: var(--color-accent-soft);
  --danger: var(--color-danger);
  --danger-soft: var(--color-danger-soft);
  --warning: var(--color-warning);
  --warning-soft: var(--color-warning-soft);
  --ok: var(--color-success);
  --ok-soft: var(--color-success-soft);
  --success: var(--color-success);
  --success-soft: var(--color-success-soft);
  --info: var(--color-info);
  --info-soft: var(--color-info-soft);
  --shadow: var(--shadow-lg);
  --shadow-soft: var(--shadow-md);
  --shadow-card: var(--shadow-sm);
  --shadow-floating: var(--shadow-lg);
  --radius-control: var(--radius-sm);
  --radius-card: var(--radius-md);
  --radius-popover: var(--radius-md);
  --radius-dialog: var(--radius-lg);

  --dojo-bg: var(--color-bg);
  --dojo-bg-2: var(--color-surface-muted);
  --dojo-surface: var(--color-surface);
  --dojo-surface-solid: var(--color-surface);
  --dojo-line: var(--color-border);
  --dojo-line-strong: var(--color-border-strong);
  --dojo-ink: var(--color-text);
  --dojo-muted: var(--color-text-muted);
  --dojo-green: var(--color-accent);
  --dojo-green-dark: var(--color-accent-strong);
  --dojo-green-soft: var(--color-accent-soft);
  --dojo-orange: var(--color-highlight);
  --dojo-orange-soft: var(--color-warning-soft);
  --dojo-blue: var(--color-info);
  --dojo-blue-soft: var(--color-info-soft);
  --dojo-red: var(--color-danger);
  --dojo-red-soft: var(--color-danger-soft);
  --dojo-radius: var(--radius-lg);
  --dojo-radius-sm: var(--radius-md);
  --dojo-shadow: var(--shadow-lg);
  --dojo-dark-bg: var(--color-bg);
  --dojo-dark-panel: var(--color-surface);
  --dojo-dark-panel-strong: var(--color-surface);
  --dojo-dark-border: var(--color-border);
  --dojo-dark-border-soft: var(--color-border);
  --dojo-dark-text: var(--color-text);
  --dojo-dark-muted: var(--color-text-muted);
  --crm-line: var(--color-border);
  --crm-muted: var(--color-text-muted);
  --crm-ink: var(--color-text);
  --crm-surface: var(--color-surface);
  --crm-soft: var(--color-surface-muted);
  --preview-line: var(--color-border);
  --preview-muted: var(--color-text-muted);
  --preview-surface: var(--color-surface);
  --ticket-blue: var(--color-accent);
  --ticket-blue-dark: var(--color-accent-strong);
  --ticket-blue-soft: var(--color-accent-soft);
  --ticket-panel: var(--color-surface);
  --ticket-border: var(--color-border);
}