/* ─────────────────────────────────────────────────────────────
   TANhub — Colors & Type Tokens
   Sourced directly from the Figma file (TAN.fig).
   Primary brand = Cyan/Teal (rgb 61,202,220) on deep ink (6,31,39).
   ───────────────────────────────────────────────────────────── */

/* Self-hosted fonts would go in /fonts. We load from Google Fonts
   as the nearest match until brand font files are supplied. */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700;800&family=Nunito+Sans:wght@400;600;700&family=Figtree:wght@400;600&display=swap');

:root {
  /* ── PALETTE — raw brand colors ─────────────────────────── */
  --tan-cyan:        rgb(61, 202, 220);   /* primary — fills/accents only (1.6:1, NOT text) */
  --tan-cyan-600:    rgb(38, 130, 143);   /* ~3.9:1 — OK for >=18px display / borders / icons */
  --tan-cyan-700:    rgb(20, 95, 107);    /* ~5.3:1 — AA text-safe cyan for links/small text.
                                              Was referenced in 4 files but never defined. — audit rank 21 */
  --tan-cyan-050:    rgb(232, 249, 251);

  --tan-ink:         rgb(6, 31, 39);      /* primary text / ink */
  --tan-ink-deep:    rgb(4, 22, 27);      /* near-black bg */
  --tan-ink-muted:   rgb(56, 76, 82);

  /* Neutral scale — derived from ink with alpha */
  --tan-fg-1:        rgb(6, 31, 39);              /* body */
  --tan-fg-2:        rgba(6, 31, 39, 0.72);       /* secondary */
  --tan-fg-3:        rgba(6, 31, 39, 0.66);       /* tertiary — nudged up for small-label AA (audit rank 21) */
  --tan-fg-4:        rgba(6, 31, 39, 0.55);       /* placeholder — was .4 (~2.6:1), too faint (audit rank 21) */
  --tan-fg-disabled: rgba(6, 31, 39, 0.24);

  --tan-border-1:    rgba(6, 31, 39, 0.08);
  --tan-border-2:    rgba(6, 31, 39, 0.12);
  --tan-border-3:    rgba(6, 31, 39, 0.16);

  --tan-bg:          rgb(255, 255, 255);
  --tan-bg-soft:     rgb(248, 248, 249);          /* panels */
  --tan-bg-mute:     rgb(240, 242, 242);          /* canvas */
  --tan-bg-dark:     rgb(21, 21, 21);             /* studio / video chrome */
  --tan-bg-studio:   rgb(15, 17, 19);             /* LUMO studio bg */

  /* ── Accents — used for status, tags, media ──────────────── */
  --tan-violet:      rgb(142, 104, 255);          /* LUMO/Studio accent */
  --tan-violet-soft: rgb(174, 146, 255);
  --tan-violet-deep: rgb(151, 71, 255);

  --tan-magenta:     rgb(192, 88, 218);           /* voice waveform */
  --tan-orange:      rgb(255, 156, 69);           /* warning / takes */
  --tan-yellow:      rgb(255, 218, 44);           /* highlight */

  --tan-green:       rgb(94, 214, 120);           /* success light */
  --tan-green-600:   rgb(76, 176, 101);           /* success text */
  --tan-green-700:   rgb(36, 159, 88);            /* success deep */

  --tan-red:         rgb(249, 57, 57);            /* danger */
  --tan-red-600:     rgb(235, 84, 84);
  --tan-red-700:     rgb(175, 1, 13);

  --tan-blue:        rgb(26, 71, 184);            /* info */

  /* ── Semantic ─────────────────────────────────────────── */
  --color-bg:             var(--tan-bg);
  --color-bg-app:         var(--tan-bg-mute);
  --color-bg-panel:       var(--tan-bg-soft);
  --color-bg-inverse:     var(--tan-ink-deep);
  --color-fg:             var(--tan-fg-1);
  --color-fg-muted:       var(--tan-fg-2);
  --color-fg-subtle:      var(--tan-fg-3);
  --color-fg-placeholder: var(--tan-fg-4);
  --color-border:         var(--tan-border-2);
  --color-border-strong:  var(--tan-border-3);

  --color-brand:          var(--tan-cyan);
  --color-brand-hover:    rgb(45, 184, 202);
  --color-brand-text:     var(--tan-ink);   /* text on cyan stays ink */

  --color-success:        var(--tan-green-700);
  --color-warn:           var(--tan-orange);
  --color-danger:         var(--tan-red);
  --color-info:           var(--tan-blue);

  /* Status — matches the figma tag-progress-status palette */
  --status-todo:          var(--tan-fg-3);
  --status-inprogress:    var(--tan-cyan-600);
  --status-review:        var(--tan-orange);
  --status-approve:       var(--tan-violet-deep);
  --status-done:          var(--tan-green-700);
  --status-paused:        var(--tan-fg-4);
  --status-rejected:      var(--tan-red);

  /* ── TYPE ─────────────────────────────────────────────── */
  --font-sans:    'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Inter', 'Roboto', system-ui, sans-serif;   /* Logo + display */
  --font-ui:      'Nunito Sans', 'Roboto', sans-serif;        /* Buttons */
  --font-meta:    'Figtree', 'Inter', sans-serif;             /* Tags / meta caps */

  /* Scale — pulled from Figma usage histogram */
  --fs-xs:    11px;
  --fs-sm:    12px;
  --fs-base:  14px;    /* default body */
  --fs-md:    16px;
  --fs-lg:    18px;
  --fs-xl:    20px;
  --fs-2xl:   24px;
  --fs-3xl:   32px;
  --fs-4xl:   48px;
  --fs-display: 153px; /* the giant page-header in figma */

  --lh-tight:  1.2;
  --lh-normal: 1.4;
  --lh-body:   1.5;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* ── Spacing (4pt grid) ───────────────────────────────── */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* ── Radii ────────────────────────────────────────────── */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;
  --r-2xl: 16px;
  --r-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────── */
  --shadow-1:    0 1px 2px rgba(6,31,39,0.08);
  --shadow-2:    0 2px 6px rgba(6,31,39,0.08);
  --shadow-3:    0 6px 16px rgba(6,31,39,0.12);
  --shadow-pop:  0 12px 32px rgba(6,31,39,0.16);
  --shadow-ring: 0 0 0 3px rgba(61,202,220,0.35);

  /* ── Motion ──────────────────────────────────────────── */
  --ease-std:    cubic-bezier(0.2, 0.0, 0.0, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:    120ms;
  --dur-base:    180ms;
  --dur-slow:    280ms;
}

/* ── ROLE TOKENS — h1/h2/p/code etc ─────────────────────── */

body, .t-body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-fg);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, .t-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--color-fg);
  margin: 0;
}
h2, .t-h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-medium);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--color-fg);
  margin: 0;
}
h3, .t-h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  margin: 0;
}
h4, .t-h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  margin: 0;
}
.t-lead {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  color: var(--color-fg-muted);
}
p, .t-p {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--color-fg);
  margin: 0;
}
.t-small { font-size: var(--fs-sm); color: var(--color-fg-muted); }
.t-caps  {
  font-family: var(--font-meta);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-fg-subtle);
}
.t-btn {
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  line-height: 1.5;
}
.t-code, code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--tan-bg-mute);
  padding: 1px 6px;
  border-radius: var(--r-sm);
}

/* ── Focus ring (brand cyan) ─────────────────────────────── */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-ring);
  border-radius: var(--r-sm);
}

/* ── Platform branding additions (Amos Project update) ───────────── */
.amos-brand small {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  opacity: .7;
}
.amos-brand-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
.amos-brand-link:hover {
  opacity: 1;
  border-bottom-style: solid;
}

.amos-footer {
  margin-top: 48px;
  padding: 20px 32px;
  border-top: 1px solid var(--ink-15, #DCE0E0);
  background: var(--surface, #fff);
  font-size: 12px;
  color: var(--ink-6, #697B80);
  letter-spacing: .01em;
}
.amos-footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  gap: 24px;
}
.amos-footer a {
  color: var(--ink-9, #061F27);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px dotted currentColor;
}
.amos-footer a:hover { border-bottom-style: solid; }
@media (max-width: 560px) {
  .amos-footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

/* ──────────────────────────────────────────────────────────────
   Reduced motion — audit rank 23. The app animated heavily (drawer/
   modal entrances, a scale(1.25) hover across a 1,800-cell mosaic,
   looping indeterminate progress bars, smooth scroll) with NO way to
   suppress it. Honor the OS "reduce motion" preference globally.
   ────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;   /* stop looping progress bars */
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .peri:hover { transform: none !important; }   /* kill the mosaic zoom */
}