/* Site-only layer: the variables and base styles the Claude dashboard provides, defined here so the same page
   (pipeline/dash/index.html, style.css, db.js) runs as a public website. Values follow docs/DESIGN-AR.md (Airtable). */

@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url(fonts/inter-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url(fonts/inter-latin-500-normal.woff2) format("woff2"); }

:root {
  color-scheme: light dark;
  --font-anthropic-sans: "Inter", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-anthropic-serif: var(--font-anthropic-sans);
  --color-fg: #181d26; --color-fg-muted: #4f545c; --color-bg: #ffffff; --color-panel: #ffffff; --color-border-line: #dddddd;
  --color-ok: #006400; --color-warn: #8a5a00; --color-bad: #aa2d00;
  --cds-font-size-title: 32px; --cds-font-size-heading: 20px; --cds-font-size-body: 15px; --cds-font-size-caption: 13px;
  --cds-font-weight-medium: 500;
  --cds-gap-xs: 4px; --cds-gap-sm: 8px; --cds-gap-md: 16px; --cds-gap-lg: 24px; --cds-gap-xl: 32px;
  --cds-pad-xs: 4px; --cds-pad-sm: 8px; --cds-pad-md: 16px; --cds-pad-lg: 24px; --cds-pad-xl: 32px;
  --cds-radius: 10px; --cds-dur-slow: 300ms;
  --cds-surface-popover: #ffffff; --cds-border: #dddddd; --cds-shadow-popover: 0 6px 20px rgba(24, 29, 38, .10);
  --cds-text-secondary: #4f545c;
  --cds-chart-categorical-1: #1b61c9; --cds-chart-muted: #9297a0; --cds-chart-axis: #9297a0;
  --cds-chart-grid: #eceef1; --cds-chart-reference: #9297a0;
  --page-bg: #f8fafc;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-fg: #e8eaee; --color-fg-muted: #a3a8b1; --color-bg: #12151b; --color-panel: #181d26; --color-border-line: #2c323d;
    --color-ok: #5cc46a; --color-warn: #e3b341; --color-bad: #ff8a6b;
    --cds-surface-popover: #1d1f25; --cds-border: #2c323d; --cds-shadow-popover: 0 6px 20px rgba(0, 0, 0, .45);
    --cds-text-secondary: #a3a8b1;
    --cds-chart-categorical-1: #6ea8ff; --cds-chart-muted: #5b6270; --cds-chart-axis: #5b6270;
    --cds-chart-grid: #262c36; --cds-chart-reference: #6b7280;
    --page-bg: #0d1015;
  }
}

html { background: var(--page-bg); }
body { margin: 0; background: var(--page-bg); color: var(--color-fg); font-family: var(--font-anthropic-sans); font-size: var(--cds-font-size-body);
  line-height: 1.5; -webkit-font-smoothing: antialiased; }
#dash-root { padding: 32px var(--dash-gutter) 48px; }
a { color: var(--cds-chart-categorical-1); }

/* the dashboard's dropdown look; the arrow sits on the left because the page is right-to-left */
.dash-select { appearance: none; -webkit-appearance: none; height: 36px; box-sizing: border-box; padding: 0 12px 0 32px; font: inherit;
  font-size: var(--cds-font-size-caption); color: var(--color-fg); background-color: var(--color-bg); border: 1px solid var(--color-border-line);
  border-radius: 6px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239297a0' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 12px center; }
.dash-select:focus { outline: 2px solid var(--cds-chart-categorical-1); outline-offset: -1px; }

/* site footer */
.site-foot { max-width: 1280px; margin: 48px auto 0; padding-top: 16px; border-top: 1px solid var(--color-border-line);
  color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); line-height: 1.7; direction: rtl; }
.site-foot p { margin: 0 0 4px; }