/* ============================================================
   SHIFT — Colors & Type tokens
   Pulled from the SHIFT Brand Style Guide + microagi App Figma.
   ============================================================ */

@font-face {
  font-family: "Haas Grot Disp";
  src: local("Neue Haas Grotesk Display Pro"),
       local("Helvetica Neue"),
       local("Inter");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}

/* SF Pro is system on Apple platforms; the stack falls through to Inter
   elsewhere. Inter is loaded from Google Fonts in index.html. */
:root {
  --font-display: "Haas Grot Disp", "Neue Haas Grotesk Display Pro",
                  "Helvetica Neue", "Inter", system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro",
               "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* ---------- Core palette (from Figma top colors) ---------- */

  /* Brand */
  --shift-orange: rgb(255, 83, 33);         /* primary — pills, accents */
  --shift-orange-bright: rgb(255, 62, 0);   /* CTA button */
  --shift-orange-soft: rgb(255, 239, 232);  /* tinted surface */

  /* Ink / neutrals */
  --ink-0: rgb(0, 0, 0);
  --ink-1: rgb(13, 13, 13);
  --ink-2: rgb(29, 29, 29);
  --ink-3: rgb(41, 41, 41);
  --ink-4: rgb(50, 50, 50);       /* secondary CTA / heavy text */
  --ink-5: rgb(67, 67, 67);
  --ink-6: rgb(106, 106, 106);    /* metadata text / hairlines */
  --ink-7: rgb(132, 132, 132);
  --ink-8: rgb(166, 166, 166);
  --ink-9: rgb(217, 217, 217);    /* separators */

  /* Surfaces */
  --surface-app: rgb(246, 246, 246);  /* app background */
  --surface-card: rgb(255, 255, 255); /* cards */
  --surface-sunken: rgb(235, 235, 235);
  --surface-white: rgb(255, 255, 255);
  --surface-black: rgb(0, 0, 0);

  /* Semantic — success */
  --success: rgb(0, 151, 35);
  --success-text: rgb(3, 170, 0);
  --success-soft: rgb(237, 245, 230);

  /* Semantic — error / warn */
  --danger: rgb(255, 77, 80);
  --danger-soft: rgb(255, 235, 235);

  /* Alpha inks */
  --ink-a80: rgba(0, 0, 0, 0.80);
  --ink-a60: rgba(0, 0, 0, 0.60);
  --ink-a50: rgba(0, 0, 0, 0.50);
  --ink-a25: rgba(0, 0, 0, 0.25);
  --ink-a10: rgba(0, 0, 0, 0.10);
  --ink-a05: rgba(0, 0, 0, 0.05);
  --ink-a02: rgba(0, 0, 0, 0.02);

  /* Shadows (from Figma drop shadows) */
  --shadow-card: 0 4px 10px 0 rgba(0, 0, 0, 0.02);
  --shadow-cta:  0 4px 20px 0 rgba(0, 0, 0, 0.25);
  --shadow-pop:  0 4px 10px 0 rgba(0, 0, 0, 0.10);

  /* Radii */
  --r-chip: 100px;      /* fully round pills / avatars */
  --r-button: 15px;     /* CTAs */
  --r-card-sm: 15px;    /* history rows, badge bubbles */
  --r-card-lg: 30px;    /* hero cards */
  --r-field: 10px;      /* form inputs */

  /* Spacing (8pt grid, plus 4px and 16px staples) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-gutter: 16px;     /* iPhone content gutter */

  /* ------------ Semantic type roles ------------
     Everything is in px to match the Figma source of truth. */

  --text-display: 600 50px/50px var(--font-display);
  --text-h1:      500 30px/36px var(--font-display);
  --text-h2:      500 24px/28px var(--font-display);
  --text-h3:      600 20px/24px var(--font-body);
  --text-h4:      600 18px/22px var(--font-body);
  --text-title:   700 16px/22px var(--font-body);   /* card titles */
  --text-body:    400 16px/22px var(--font-body);
  --text-body-md: 500 16px/22px var(--font-body);
  --text-label:   500 13px/18px var(--font-body);   /* pills, meta */
  --text-meta:    400 13px/18px var(--font-body);   /* timestamps */
  --text-caption: 400 12px/16px var(--font-body);

  /* Foreground roles */
  --fg-default: var(--ink-0);
  --fg-muted: var(--ink-a60);
  --fg-subtle: var(--ink-a50);
  --fg-on-color: #fff;
  --fg-accent: var(--shift-orange);
  --fg-success: var(--success);
  --fg-danger: var(--danger);
}

/* ---------- Base document ---------- */
html, body {
  font-family: var(--font-body);
  color: var(--fg-default);
  background: var(--surface-app);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Semantic element defaults ---------- */
.h-display { font: var(--text-display); letter-spacing: -0.02em; }
.h1 { font: var(--text-h1); }
.h2 { font: var(--text-h2); }
.h3 { font: var(--text-h3); }
.h4 { font: var(--text-h4); }
.title { font: var(--text-title); }
.body { font: var(--text-body); }
.label { font: var(--text-label); }
.meta { font: var(--text-meta); color: var(--fg-muted); }
.caption { font: var(--text-caption); color: var(--fg-muted); }