/**
 * MiraalTech — global color tokens
 * Use var(--*) everywhere. Do not hardcode hex in other CSS files.
 */
:root {
  color-scheme: light dark;

  /* Brand */
  --red: #145e5e;
  --red-h: #0a3d3d;
  --red-l: #e8f5f5;
  --red-pale: #f0fafa;
  --red-b: #cceeee;
  --accent-mint: #7eece8;
  --accent-mint-soft: rgba(126, 236, 232, 0.25);

  /* Neutrals & surfaces */
  --dark: #0a3d3d;
  --navy: #0d4a4a;
  --navy-d: #072e2e;
  --navy-c: #0f3a3a;
  --w: #fff;
  --g50: #f0f4f0;
  --g100: #fafaf7;
  --g200: #e2eded;
  --g300: #cceeee;
  --g400: #a8d4d4;
  --g500: #5a9090;
  --g600: #3a6e6e;
  --g700: #2a5252;
  --g800: #1a3838;

  /* Semantic */
  --green: #22c55e;
  --green-bright: #4ade80;
  --yellow: #f59e0b;
  --blue: #1d8a8a;
  --danger: #ff6b6b;
  --warning: #fbbf24;

  /* Layout */
  --sh-r: 0 4px 20px rgba(20, 94, 94, 0.25);
  --sh-card: 0 16px 48px rgba(10, 61, 61, 0.08);
  --bg-page: #fafaf7;
  --bg-section: #fff;
  --bg-muted: #f0efed;
  --bg-elevated: #fff;
  --text-primary: #0a3d3d;
  --text-secondary: #555;
  --text-tertiary: #888;
  --border-default: #e2eded;

  /* Pricing / dark panels */
  --pt-bg: var(--navy);
  --pt-card: #1a3d3d;
  --pt-card-border: rgba(255, 255, 255, 0.08);
  --pt-text: #fff;
  --pt-muted: rgba(255, 255, 255, 0.5);

  /* Overlays */
  --overlay-brand-06: rgba(20, 94, 94, 0.06);
  --overlay-brand-14: rgba(20, 94, 94, 0.14);
  --overlay-white-10: rgba(255, 255, 255, 0.1);

  /* Form fields */
  --input-bg: transparent;
  --input-bg-focus: rgba(20, 94, 94, 0.05);
  --input-border: var(--g300);
  --input-border-focus: var(--red);
}

@media (prefers-color-scheme: light) {
  :root {
    --red: #145e5e;
    --red-h: #0a3d3d;
    --red-l: #e8f5f5;
    --red-pale: #f0fafa;
    --red-b: #cceeee;
    --dark: #0a3d3d;
    --navy: #0d4a4a;
    --navy-d: #072e2e;
    --navy-c: #0f3a3a;
    --w: #fff;
    --g50: #f0f4f0;
    --g100: #fafaf7;
    --g200: #e2eded;
    --g300: #cceeee;
    --g400: #a8d4d4;
    --g500: #5a9090;
    --g600: #3a6e6e;
    --g700: #2a5252;
    --g800: #1a3838;
    --green: #22c55e;
    --yellow: #f59e0b;
    --blue: #1d8a8a;
    --sh-r: 0 4px 20px rgba(20, 94, 94, 0.25);
    --bg-page: #fafaf7;
    --bg-section: #fff;
    --bg-muted: #f0efed;
    --bg-elevated: #fff;
    --text-primary: #0a3d3d;
    --text-secondary: #555;
    --text-tertiary: #888;
    --border-default: #e2eded;
    --pt-bg: var(--navy);
    --pt-card: #1a3d3d;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --red: #26a3a3;
    --red-h: #1a6b6b;
    --red-l: #0d2a2a;
    --red-pale: #051515;
    --red-b: #0f3f3f;
    --dark: #e5e5e5;
    --navy: #d0d0d0;
    --navy-d: #c0c0c0;
    --navy-c: #d8d8d8;
    --w: #1a1a1a;
    --g50: #2a2a2a;
    --g100: #252525;
    --g200: #333333;
    --g300: #3d3d3d;
    --g400: #4a4a4a;
    --g500: #b0b0b0;
    --g600: #999999;
    --g700: #777777;
    --g800: #e5e5e5;
    --green: #4ade80;
    --yellow: #facc15;
    --blue: #4fd8d8;
    --sh-r: 0 4px 20px rgba(38, 163, 163, 0.15);
    --bg-page: #0f0f0f;
    --bg-section: #1a1a1a;
    --bg-muted: #141414;
    --bg-elevated: #222222;
    --text-primary: #e5e5e5;
    --text-secondary: #b0b0b0;
    --text-tertiary: #888888;
    --border-default: rgba(255, 255, 255, 0.1);
    --pt-bg: #0a2a2a;
    --pt-card: #123535;

    --input-bg: transparent;
    --input-bg-focus: rgba(255, 255, 255, 0.06);
    --input-border: rgba(255, 255, 255, 0.14);
    --input-border-focus: var(--red);
  }
}