/* shrinq design tokens — the single source for colour, type, spacing, shape and motion.
   One dark theme (owner's choice), built on Apple's HIG dark greys. Every colour in the UI is defined here. */

/* Roobert (owner-supplied files, mapped by file name), self-hosted. */
@font-face {
  font-family: "Roobert";
  src: url("../fonts/roobert/Roobert-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roobert";
  src: url("../fonts/roobert/Roobert-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roobert";
  src: url("../fonts/roobert/Roobert-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roobert";
  src: url("../fonts/roobert/Roobert-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Geist (SIL OFL), self-hosted backup: one variable file covers 400–700. */
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist/Geist-Variable.woff2") format("woff2-variations"),
       url("../fonts/geist/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* The one font switch: remove Roobert here and Geist leads. */
  --font-sans: Roobert, Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* Surfaces (HIG dark: base → elevated) */
  --color-bg: #1C1C1E;
  --color-surface: #262628;
  --color-surface-raised: #2F2F32;
  --color-fill: #343437;
  --color-fill-strong: #444448;
  --color-bar: rgb(28 28 30 / 0.78);
  --color-scrim: rgb(0 0 0 / 0.62);
  --color-glow: rgb(125 180 240 / 0.16);

  /* Text */
  --color-text: #F5F5F7;
  --color-text-secondary: #A1A1A6;
  --color-text-on-accent: #0B1726;

  /* Lines */
  --color-separator: #3A3A3D;
  --color-hairline: #333336;
  --color-control-border: #7A7A80;

  /* Accent: sky blue, the logo's q and every interactive element */
  --color-accent: #7DB4F0;
  --color-accent-hover: #98C4F4;
  --color-accent-pressed: #67A3E6;
  --color-accent-text: #8EC0F5;
  --color-accent-tint: #2B3A4B;
  --color-accent-tint-hover: #34465A;

  /* Logo */
  --logo-ink: var(--color-text);
  --logo-accent: var(--color-accent);

  /* Data colours (codefa-style): sky line, coral and cream accents */
  --color-coral: #E5897A;
  --color-cream: #FFF1C7;

  /* Semantic */
  --color-success: #30D158;
  --color-success-text: #4ADE80;
  --color-success-tint: #1D3326;
  --color-warning: #FFB340;
  --color-warning-text: #FFC266;
  --color-warning-tint: #3A2F1A;
  --color-danger: #FF6961;
  --color-danger-hover: #FF8279;
  --color-danger-text: #FF8A82;
  --color-danger-tint: #3D2224;
  --color-text-on-danger: #2A0D0B;
  --color-switch-off: #76767C;

  /* Charts */
  --chart-line: var(--color-accent);
  --chart-grid: #3A3A3D;
  --chart-bar: #7A7461;
  --chart-bar-peak: var(--color-cream);
  --chart-track: var(--color-fill);
  --chart-cat-1: #7DB4F0;
  --chart-cat-2: #C9705F;
  --chart-cat-3: #F5E3A8;
  --barlist-1: #2E6AA8;
  --barlist-2: #8A4438;
  --barlist-3: #7D6C33;

  /* Type scale (rem; 1rem = 16px) — HIG text styles */
  --text-large-title: 2.125rem;  --leading-large-title: 2.5625rem;
  --text-title-1: 1.75rem;       --leading-title-1: 2.125rem;
  --text-title-2: 1.375rem;      --leading-title-2: 1.75rem;
  --text-title-3: 1.25rem;       --leading-title-3: 1.5625rem;
  --text-headline: 1.0625rem;    --leading-headline: 1.375rem;
  --text-body: 1.0625rem;        --leading-body: 1.375rem;
  --text-callout: 1rem;          --leading-callout: 1.3125rem;
  --text-subhead: 0.9375rem;     --leading-subhead: 1.25rem;
  --text-footnote: 0.8125rem;    --leading-footnote: 1.125rem;
  --text-caption: 0.75rem;       --leading-caption: 1rem;
  --text-metric: 2rem;           --leading-metric: 2.375rem;
  --text-metric-hero: 2.75rem;   --leading-metric-hero: 3.125rem;

  /* HIG 8-pt grid */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Shape */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-control: 12px;
  --radius-card: 18px;
  --radius-sheet: 22px;
  --radius-pill: 999px;
  --hairline: 1px;

  /* Depth */
  --shadow-card: 0 1px 0 rgb(255 255 255 / 0.03) inset, 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-raised: 0 18px 48px rgb(0 0 0 / 0.5), 0 2px 8px rgb(0 0 0 / 0.35);
  --shadow-control: 0 1px 2px rgb(0 0 0 / 0.4);

  /* Layout (HIG margins: 16 compact, 20 regular, 32 wide) */
  --touch: 44px;
  --gutter: 16px;
  --panel-pad: 16px;
  --grid-gap: 16px;
  --content-dashboard: 72rem;
  --content-admin: 76rem;
  --sidebar-width: 15.5rem;
  --tabbar-height: 3.5rem;
  --appbar-height: 4rem;

  /* Motion */
  --duration: 200ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (min-width: 600px) {
  :root {
    --gutter: 20px;
    --panel-pad: 20px;
    --grid-gap: 20px;
  }
}

@media (min-width: 1280px) {
  :root {
    --gutter: 32px;
  }
}