/*
 * 21Digby KPI Dashboard — design tokens
 *
 * Every color, font, size, radius and shadow used by the app lives here.
 * To re-theme the app, change values in this file only. Component styles
 * (app.css) and chart settings (chart-theme.js) read these variables.
 *
 * Source: 21Digby Brand Guide 2026 + the "Gradient ribbon" design concept.
 */

:root {
  /* ---- Brand palette (from the 2026 brand guide) ---- */
  --brand-ink: #17233A;          /* primary text, headings */
  --brand-signal-blue: #145BE7;  /* "human signal" dot, links, focus ring */
  --brand-sun: #FFD326;
  --brand-mango: #FF9D2E;
  --brand-coral: #FF5A4F;
  --brand-slate: #5D6678;        /* secondary text */
  --brand-blue-mist: #EFF5FF;

  /* ---- Off-brand accents (NOT in the brand guide) ----
     Use sparingly, only where the brand palette runs out of distinct colors.
     Current use: the Website source accent (--source-website). */
  --offbrand-magenta: #E6007E;

  /* ---- App surfaces ---- */
  --color-page: #EEEBE5;         /* warm stone page background */
  --color-surface: #FFFFFF;      /* cards, panels */
  --color-surface-sunken: #F7F5F1; /* inputs, inset panels */
  --color-border: #DEDAD2;       /* input borders */
  --color-border-soft: #E4E0D8;  /* card dividers, dashed placeholders */
  --color-rule: #DAD5CC;         /* section heading rules */

  /* ---- Charcoal (header bar, primary buttons) ---- */
  --color-charcoal: #1E2229;
  --color-charcoal-raised: #2E333C; /* secondary buttons on the charcoal bar */
  --color-on-charcoal: #FFFFFF;
  --color-on-charcoal-muted: #C7CCD5;
  --color-signal-on-dark: #5B8CFF;  /* blue dot on charcoal (logo point) */
  --color-footer-text: var(--brand-sun); /* copyright line on the charcoal footer */

  /* ---- Text ---- */
  --color-text: var(--brand-ink);
  --color-text-muted: var(--brand-slate);
  --color-text-subtle: #4A5366;   /* helper text that must still pass 4.5:1 */
  --color-link: var(--brand-signal-blue);
  --color-link-hover: #0F47B8;
  --color-numbered: #D13C31;      /* coral-dark for 01/02/03 labels (passes contrast on white) */
  --color-error: #D13C31;         /* form errors: same coral-dark, passes contrast on white */
  --color-error-soft: #FDECEA;    /* background of the error notice */
  --color-status-yes: #1E8A44;    /* green check: active client (passes 3:1 on white) */
  --color-status-no: #D13C31;     /* red X: inactive client (same coral-dark as errors) */
  --color-row-hover: #FBFAF7;     /* table row hover */

  /* ---- The ribbon gradient (accent strip on the form and empty-state cards) ---- */
  --gradient-ribbon: linear-gradient(100deg, var(--brand-sun) 0%, var(--brand-mango) 45%, var(--brand-coral) 85%, #F2476A 100%);
  --gradient-logo: linear-gradient(135deg, var(--brand-sun), var(--brand-mango) 55%, var(--brand-coral));

  /* ---- Source accent colors (bar down the left edge of each stat tile) ----
     Each source keeps its color on every client's dashboard. */
  --source-linkedin: var(--brand-sun);
  --source-facebook: var(--brand-mango);
  --source-instagram: var(--brand-coral);
  --source-youtube: var(--brand-ink);
  --source-website: var(--offbrand-magenta);

  /* ---- Charts (read by chart-theme.js) ---- */
  --chart-line: var(--color-charcoal);
  --chart-fill-top: var(--brand-mango);
  --chart-fill-bottom: var(--brand-sun);
  --chart-latest-point: var(--brand-signal-blue);
  --chart-grid: #EEEBE5;
  --chart-axis-text: var(--brand-slate);

  /* ---- Typography ---- */
  --font-display: "Sora", system-ui, sans-serif;   /* headings, big numbers */
  --font-body: "DM Sans", system-ui, sans-serif;   /* UI and body text */

  --text-h1: 34px;      /* page title (client name) */
  --text-h2: 24px;      /* section title (source name) */
  --text-h3: 20px;      /* card titles */
  --text-body: 16px;
  --text-small: 14px;
  --text-label: 13px;   /* field labels, uppercase chart labels */
  --text-micro: 12px;   /* helper text, axis labels */
  --text-stat: 22px;    /* latest value on a chart card */
  --text-chip: 16px;    /* values on stat tiles */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;  /* logo only */

  --tracking-label: 0.05em;  /* uppercase labels and buttons */
  --line-height: 1.5;

  /* ---- Spacing (8px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-18: 72px;

  --page-max-width: 1280px;
  --page-gutter: 32px;      /* drop to 24px under 900px wide */
  --form-max-width: 880px;
  --login-max-width: 480px;  /* sign-in page */
  --tile-width: 230px;      /* stat tiles: 5 fit in one row at full page width */
  --tile-bar-width: 6px;    /* stat tiles: source color bar down the left edge */

  /* ---- Corner radius ---- */
  --radius-sm: 10px;    /* chips */
  --radius-md: 12px;    /* buttons, inputs, selects */
  --radius-lg: 16px;    /* notices, source buttons */
  --radius-xl: 22px;    /* chart cards */
  --radius-2xl: 24px;   /* stat tiles, filter bar */
  --radius-3xl: 28px;   /* form card, empty-state card */
  --radius-pill: 999px;

  /* ---- Shadows (the "floating card" look) ---- */
  --shadow-card: 0 1px 2px rgba(30, 34, 41, 0.05), 0 18px 36px -20px rgba(30, 34, 41, 0.35);
  --shadow-card-lg: 0 1px 2px rgba(30, 34, 41, 0.05), 0 26px 48px -24px rgba(30, 34, 41, 0.40);
  --shadow-button: 0 12px 24px -12px rgba(30, 34, 41, 0.70);

  /* ---- Controls ---- */
  --control-height: 44px;      /* minimum touch target */
  --control-height-lg: 48px;
  --focus-ring: 2px solid var(--brand-signal-blue);
  --focus-offset: 2px;
}