/* MaintenanceHub Owner Control — design tokens.
   Semantic color architecture, light + dark. No external resources. */

:root {
  /* Brand */
  --brand:      #006c35;   /* MaintenanceHub green */
  --brand-600:  #00582b;
  --brand-700:  #00471f;   /* deep */
  --brand-050:  #e7f2ec;   /* tint */
  --brand-ink:  #ffffff;   /* text on brand */
  --gold:       #c4a45c;
  --gold-600:   #a9863f;

  /* Neutrals — slight green bias, chosen not defaulted */
  --bg:         #f4f7f5;
  --surface:    #ffffff;
  --panel:      #ffffff;
  --panel-2:    #f7faf8;
  --rail:       #08271a;   /* dark green rail in both themes */
  --rail-ink:   #cfe3d8;
  --rail-ink-2: #8fb3a1;
  --rail-active:#0e3c29;

  --border:     #dde6e1;
  --border-2:   #eceff0;
  --ring:       rgba(0,108,53,.38);

  --text:       #14201b;
  --text-2:     #48584f;
  --text-3:     #5c6d63;
  --text-inv:   #f4f7f5;

  /* Semantic status (separate from brand accent) */
  --ok:      #0f8a4f;  --ok-bg:      #e6f4ec;  --ok-ink:      #0a6b3d;
  --warn:    #b9820c;  --warn-bg:    #fbf1dc;  --warn-ink:    #8a5f06;
  --danger:  #c23b2c;  --danger-bg:  #fbe9e6;  --danger-ink:  #8f2a1f;
  --info:    #2a72c9;  --info-bg:    #e7f0fb;  --info-ink:    #1d5296;
  --neutral: #64756b;  --neutral-bg: #eef2f0;

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(16,32,24,.05), 0 1px 3px rgba(16,32,24,.06);
  --shadow-2: 0 4px 12px rgba(16,32,24,.08), 0 2px 4px rgba(16,32,24,.05);
  --shadow-pop: 0 12px 32px rgba(8,32,20,.18);

  /* Geometry */
  --r-sm: 6px;  --r: 10px;  --r-lg: 14px;  --r-pill: 999px;
  --rail-w: 248px;  --topbar-h: 58px;
  --gap: 16px;

  /* Type */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-ar: "Segoe UI", Tahoma, "Noto Naskh Arabic", sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
  --fs:   14.5px;
  --lh:   1.55;
}

/* Dark — redefine tokens only; components read tokens, never hardcode. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand:     #1f9d5b;
    --brand-600: #16864b;
    --brand-700: #0c6b3a;
    --brand-050: #10231a;
    --brand-ink: #06130c;
    --gold:      #d8bd7a;
    --gold-600:  #c4a45c;

    --bg:        #0c1511;
    --surface:   #111e17;
    --panel:     #13221a;
    --panel-2:   #172a20;
    --rail:      #08160f;
    --rail-ink:  #c4dccf;
    --rail-ink-2:#7ea08e;
    --rail-active:#123324;

    --border:    #24382d;
    --border-2:  #1c2c23;
    --ring:      rgba(31,157,91,.45);

    --text:      #e9f1ec;
    --text-2:    #a8bcb1;
    --text-3:    #7d9285;
    --text-inv:  #0c1511;

    --ok-bg:     #10281c; --ok-ink:     #58c88c;
    --warn-bg:   #2b2410; --warn-ink:   #e6bd63;
    --danger-bg: #2c1613; --danger-ink: #ef8a7c;
    --info-bg:   #10233a; --info-ink:   #6fa8e6;
    --neutral-bg:#1a2620;

    --shadow-1: 0 1px 2px rgba(0,0,0,.35);
    --shadow-2: 0 6px 18px rgba(0,0,0,.4);
    --shadow-pop: 0 14px 40px rgba(0,0,0,.55);
  }
}

/* Explicit theme toggle wins in both directions. */
:root[data-theme="dark"] {
  --brand:#1f9d5b; --brand-600:#16864b; --brand-700:#0c6b3a; --brand-050:#10231a; --brand-ink:#06130c;
  --gold:#d8bd7a; --gold-600:#c4a45c;
  --bg:#0c1511; --surface:#111e17; --panel:#13221a; --panel-2:#172a20;
  --rail:#08160f; --rail-ink:#c4dccf; --rail-ink-2:#7ea08e; --rail-active:#123324;
  --border:#24382d; --border-2:#1c2c23; --ring:rgba(31,157,91,.45);
  --text:#e9f1ec; --text-2:#a8bcb1; --text-3:#7d9285; --text-inv:#0c1511;
  --ok-bg:#10281c; --ok-ink:#58c88c; --warn-bg:#2b2410; --warn-ink:#e6bd63;
  --danger-bg:#2c1613; --danger-ink:#ef8a7c; --info-bg:#10233a; --info-ink:#6fa8e6; --neutral-bg:#1a2620;
  --shadow-1:0 1px 2px rgba(0,0,0,.35); --shadow-2:0 6px 18px rgba(0,0,0,.4); --shadow-pop:0 14px 40px rgba(0,0,0,.55);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }