/*
 * Daryng Retail Labels UI foundation v4.20.0
 * Semantic design tokens and compatibility aliases.
 * Keep tenant identity separate from application interaction and status colours.
 */

:root {
  /* Typography */
  --font-ui: "Geist", "Aptos", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Geist Mono", "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --app-font: var(--font-ui);

  --text-12: 0.75rem;
  --text-13: 0.8125rem;
  --text-14: 0.875rem;
  --text-16: 1rem;
  --text-18: 1.125rem;
  --text-20: 1.25rem;
  --text-24: 1.5rem;
  --text-30: 1.875rem;
  --text-40: 2.5rem;

  /* Neutral surfaces */
  --canvas: #f7f7f5;
  --surface: #ffffff;
  --surface-subtle: #fbfbf9;
  --surface-inset: #f1f2ef;
  --surface-raised: #ffffff;

  --ink: #1d211f;
  --ink-secondary: #4e5551;
  --ink-muted: #707772;
  --ink-faint: #929893;

  --line: #e2e5e1;
  --line-strong: #cdd2cd;

  /* Stable system interaction colour */
  --ui-accent: #236353;
  --ui-accent-hover: #194d41;
  --ui-accent-active: #123e35;
  --ui-accent-soft: #e8f1ee;
  --ui-accent-contrast: #ffffff;
  --focus-ring: rgba(35, 99, 83, 0.24);

  /* Daryng and tenant identity */
  --brand-daryng: #b6253c;
  --brand-daryng-soft: #f7e9ec;
  --tenant-accent: var(--brand-daryng);
  --tenant-accent-dark: #8e1d2f;
  --tenant-accent-soft: var(--brand-daryng-soft);
  --tenant-accent-contrast: #ffffff;
  --tenant-chrome: #1d211f;
  --tenant-chrome-text: #f2f3f0;

  /* Semantic status colours */
  --success: #2f6a4d;
  --success-soft: #eaf2ed;
  --warning: #8a620d;
  --warning-soft: #f8f0dc;
  --critical: #ac3a3a;
  --critical-soft: #f8eaea;
  --info: #3f6176;
  --info-soft: #eaf0f3;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Shape */
  --radius-1: 4px;
  --radius-2: 6px;
  --radius-3: 8px;
  --radius-4: 10px;
  --radius-dialog: 12px;
  --radius-control: var(--radius-2);
  --radius-panel: var(--radius-3);
  --radius-overlay: var(--radius-dialog);

  /* Elevation */
  --shadow-raised: 0 1px 2px rgba(25, 32, 28, 0.05), 0 8px 24px rgba(25, 32, 28, 0.04);
  --shadow-overlay: 0 18px 50px rgba(25, 32, 28, 0.14);

  /* Motion */
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-press: 120ms;
  --duration-control: 160ms;
  --duration-menu: 190ms;
  --duration-panel: 260ms;
  --duration-page: 380ms;

  /* Layout */
  --sidebar-width: 252px;
  --workspace-bar-height: 64px;
  --content-max: 1440px;
  --content-gutter: clamp(20px, 3vw, 44px);
  --page-block-start: 36px;
  --page-block-end: 72px;

  /* Layering */
  --z-base: 0;
  --z-sticky: 20;
  --z-dropdown: 40;
  --z-overlay: 60;
  --z-dialog: 80;
  --z-toast: 100;

  /* Compatibility aliases used by the existing application */
  --app-bg: var(--canvas);
  --surface-soft: var(--surface-subtle);
  --surface-strong: var(--surface-inset);
  --ink-strong: var(--ink);
  --muted: var(--ink-muted);
  --muted-strong: var(--ink-secondary);
  --accent: var(--ui-accent);
  --accent-dark: var(--ui-accent-hover);
  --accent-soft: var(--ui-accent-soft);
  --accent-contrast: var(--ui-accent-contrast);
  --chrome: var(--tenant-chrome);
  --chrome-soft: color-mix(in srgb, var(--tenant-chrome) 92%, white);
  --chrome-text: var(--tenant-chrome-text);
  --danger: var(--critical);
  --radius: var(--radius-panel);
  --shadow-soft: var(--shadow-raised);
  --shadow-menu: var(--shadow-overlay);
  --motion: var(--duration-control) var(--ease-standard);
  --z-sidebar: var(--z-sticky);
  --z-header: var(--z-sticky);
  --z-menu: var(--z-dropdown);

  /* Compatibility aliases retained by professional.css */
  --pro-canvas: var(--canvas);
  --pro-canvas-warm: #f7f3eb;
  --pro-surface: var(--surface);
  --pro-surface-subtle: var(--surface-subtle);
  --pro-surface-raised: var(--surface-raised);
  --pro-ink: var(--ink);
  --pro-ink-soft: var(--ink-secondary);
  --pro-muted: var(--ink-muted);
  --pro-hairline: var(--line);
  --pro-hairline-strong: var(--line-strong);
  --pro-shadow-xs: 0 1px 2px rgba(25, 32, 28, 0.04);
  --pro-shadow-sm: var(--shadow-raised);
  --pro-shadow-md: var(--shadow-overlay);
  --pro-ease: var(--ease-standard);
  --pro-content: var(--content-max);
  --pro-sidebar: var(--sidebar-width);
  --pro-topbar: var(--workspace-bar-height);

  /* Public compatibility aliases */
  --public-canvas: var(--canvas);
  --public-surface: var(--surface);
  --public-ink: var(--ink);
  --public-muted: var(--ink-muted);
  --public-line: var(--line);
}

body[data-font-size="small"] { --type-scale: 0.93; }
body[data-font-size="comfortable"] { --type-scale: 1; }
body[data-font-size="large"] { --type-scale: 1.08; }
body[data-font-size="xlarge"] { --type-scale: 1.16; }

body[data-density="compact"] {
  --page-block-start: 28px;
  --page-block-end: 56px;
}
body[data-density="spacious"] {
  --page-block-start: 44px;
  --page-block-end: 88px;
}

body[data-radius="square"] {
  --radius-control: var(--radius-1);
  --radius-panel: var(--radius-1);
  --radius-overlay: var(--radius-2);
}
body[data-radius="soft"] {
  --radius-control: var(--radius-2);
  --radius-panel: var(--radius-3);
  --radius-overlay: var(--radius-dialog);
}
body[data-radius="rounded"] {
  --radius-control: var(--radius-3);
  --radius-panel: var(--radius-4);
  --radius-overlay: var(--radius-dialog);
}

body[data-content-width="focused"] { --content-max: 980px; }
body[data-content-width="standard"] { --content-max: 1240px; }
body[data-content-width="wide"] { --content-max: 1440px; }

body[data-theme="warm"] {
  --canvas: #f7f3eb;
  --surface-subtle: #fbf8f1;
  --surface-inset: #f0ece3;
  --line: #e4dfd5;
  --line-strong: #cfc7bb;
}

body[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #151917;
  --surface: #1c211e;
  --surface-subtle: #202622;
  --surface-inset: #272e29;
  --surface-raised: #222824;
  --ink: #f0f2ef;
  --ink-secondary: #c7ccc8;
  --ink-muted: #9ca49e;
  --ink-faint: #7d857f;
  --line: #333b35;
  --line-strong: #465049;
  --ui-accent: #67a997;
  --ui-accent-hover: #82bbaa;
  --ui-accent-active: #9ac9bc;
  --ui-accent-soft: #213b34;
  --ui-accent-contrast: #10201b;
  --focus-ring: rgba(103, 169, 151, 0.32);
  --success-soft: #20352a;
  --warning-soft: #3a321d;
  --critical-soft: #3d2424;
  --info-soft: #23323a;
  --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.18), 0 10px 28px rgba(0, 0, 0, 0.14);
  --shadow-overlay: 0 20px 56px rgba(0, 0, 0, 0.38);
}

@media (prefers-color-scheme: dark) {
  body[data-theme="system"] {
    color-scheme: dark;
    --canvas: #151917;
    --surface: #1c211e;
    --surface-subtle: #202622;
    --surface-inset: #272e29;
    --surface-raised: #222824;
    --ink: #f0f2ef;
    --ink-secondary: #c7ccc8;
    --ink-muted: #9ca49e;
    --ink-faint: #7d857f;
    --line: #333b35;
    --line-strong: #465049;
    --ui-accent: #67a997;
    --ui-accent-hover: #82bbaa;
    --ui-accent-active: #9ac9bc;
    --ui-accent-soft: #213b34;
    --ui-accent-contrast: #10201b;
    --focus-ring: rgba(103, 169, 151, 0.32);
    --success-soft: #20352a;
    --warning-soft: #3a321d;
    --critical-soft: #3d2424;
    --info-soft: #23323a;
    --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.18), 0 10px 28px rgba(0, 0, 0, 0.14);
    --shadow-overlay: 0 20px 56px rgba(0, 0, 0, 0.38);
  }
}

body[data-contrast="high"] {
  --ink-secondary: var(--ink);
  --ink-muted: color-mix(in srgb, var(--ink) 82%, transparent);
  --line: color-mix(in srgb, var(--ink) 28%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 48%, transparent);
}