/* ============================================================================
   Rapu Design Tokens — single source of truth for the whole product surface.
   ============================================================================

   Usage:   <link rel="stylesheet" href="design-tokens.css">
   Then reference as `var(--color-accent)`, `var(--space-4)`, etc.

   This file intentionally keeps the short legacy variable names that
   `index.html` already uses (`--accent`, `--border`, `--text`, etc.) so
   existing CSS keeps working unchanged. New tokens are added alongside
   in a more systematic naming convention for new screens.

   ============================================================================ */

:root {
  /* ------------------------------------------------------------------------
     COLORS — Brand
     ------------------------------------------------------------------------ */

  /* Primary green — the structural / identity colour */
  --color-brand:            #2c6e49;
  --color-brand-hover:      #245a3b;
  --color-brand-active:     #1f4a31;
  --color-brand-soft:       #e8f0ec;   /* tinted bg for brand pills   */
  --color-brand-soft-2:     #f0f7f3;   /* even softer bg              */
  --color-brand-sage:       #a0b8aa;   /* muted sage accent           */
  --color-brand-deep:       #1E3A2E;   /* deeper forest, matches landing */

  /* Terracotta — the "alive" accent. Bridges the landing-page crab
     character into the app. Used for: streaming indicators, live
     status dots, destructive / warm-alert actions, attention moments
     that the brand green would make feel too structural. */
  --color-accent-warm:      #C2502D;
  --color-accent-warm-hover: #9B3E22;
  --color-accent-warm-soft: #E8B8A3;
  --color-accent-warm-bg:   #FBEDE4;   /* cream-terracotta wash, active states */

  /* Cream paper — matches the landing page canvas. Used as the app
     background so the whole surface feels like a sibling of the
     marketing site instead of cold neutral grey. */
  --color-surface-paper:    #FBF8F1;
  --color-surface-paper-2:  #F5F0E4;   /* deeper cream for secondary areas */

  /* Legacy aliases kept for compatibility with existing markup */
  --accent:                 var(--color-brand);
  --accent-hover:           var(--color-brand-hover);
  --accent-light:           var(--color-brand-soft);

  /* ------------------------------------------------------------------------
     COLORS — Surfaces
     ------------------------------------------------------------------------ */

  --color-surface:          #fafafa;   /* page background             */
  --color-surface-warm:     #faf9f7;   /* subtle warm hover bg        */
  --color-surface-cream:    #f5f4f1;   /* inset / tray / secondary    */
  --color-surface-card:     #ffffff;   /* primary card / panel        */
  --color-surface-subtle:   #f0efec;   /* disabled / placeholder bg   */

  /* Legacy aliases */
  --bg:                     var(--color-surface);
  --bg-warm:                var(--color-surface-cream);
  --bg-card:                var(--color-surface-card);

  /* ------------------------------------------------------------------------
     COLORS — Borders
     ------------------------------------------------------------------------ */

  --color-border-subtle:    #f0efec;
  --color-border:           #e8e6e1;   /* default border              */
  --color-border-strong:    #d0cec8;   /* hover / emphasised border   */

  /* Legacy alias */
  --border-hover:           var(--color-border-strong);

  /* ------------------------------------------------------------------------
     COLORS — Text
     ------------------------------------------------------------------------ */

  --color-text:             #1a1a1a;   /* primary text                */
  --color-text-secondary:   #6b6b6b;   /* supporting text             */
  --color-text-muted:       #8a8a8a;   /* de-emphasised / metadata    */
  --color-text-inverse:     #ffffff;   /* text on coloured surfaces   */

  /* Legacy aliases */
  --text:                   var(--color-text);
  --text-secondary:         var(--color-text-secondary);
  --text-light:             var(--color-text-muted);

  /* ------------------------------------------------------------------------
     COLORS — Status / semantic
     ------------------------------------------------------------------------ */

  --color-danger:           #c4745a;   /* coral-red, warm not harsh   */
  --color-danger-bg:        #faf0ec;
  --color-danger-strong:    #8a5a3a;

  --color-warning:          #a07c3e;   /* amber                       */
  --color-warning-bg:       #f7f2e8;
  --color-warning-strong:   #8a6a2e;

  --color-info:             #4a6fa5;   /* blue                        */
  --color-info-bg:          #edf1f7;

  --color-accent-purple:    #7c5cbf;
  --color-accent-purple-bg: #f0ecf7;

  /* Legacy aliases */
  --coral:                  var(--color-danger);
  --coral-light:            var(--color-danger-bg);
  --blue:                   var(--color-info);
  --blue-light:             var(--color-info-bg);
  --amber:                  var(--color-warning);
  --amber-light:            var(--color-warning-bg);
  --purple:                 var(--color-accent-purple);
  --purple-light:           var(--color-accent-purple-bg);

  /* ------------------------------------------------------------------------
     TYPOGRAPHY
     ------------------------------------------------------------------------ */

  --font-body:
    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  /* Display family for page/section headers — Inter Tight is the landing
     page's display face, brought over so the app reads as the same brand.
     Falls back to Inter if Tight hasn't loaded (Google Fonts network hiccup). */
  --font-display:
    'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, sans-serif;
  /* Mono family — JetBrains Mono is explicitly preferred now. Covers file
     paths, tokens, ids, timestamps. Sharper than SF Mono at small sizes. */
  --font-mono:
    'JetBrains Mono', 'SF Mono', 'Fira Code', Menlo, Monaco,
    'Courier New', monospace;

  /* Type scale — 11 → 28 px, 8 steps */
  --text-xs:    11px;   /* metadata, timestamps                        */
  --text-sm:    12px;   /* compact UI, table labels                    */
  --text-base:  13px;   /* default body                                */
  --text-md:    14px;   /* primary body / inputs                       */
  --text-lg:    15px;   /* prominent body                              */
  --text-xl:    17px;   /* logo / section heading                      */
  --text-2xl:   20px;   /* page heading                                */
  --text-3xl:   24px;   /* display heading                             */
  --text-4xl:   28px;   /* hero stat number                            */

  /* Weights */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  /* Line height */
  --leading-tight:    1.3;
  --leading-normal:   1.5;
  --leading-relaxed:  1.6;
  --leading-loose:    1.7;

  /* ------------------------------------------------------------------------
     SPACING — 4 / 8 px scale
     ------------------------------------------------------------------------ */

  --space-0:    0;
  --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-16:   64px;
  --space-20:   80px;

  /* ------------------------------------------------------------------------
     RADII — rounded corners
     ------------------------------------------------------------------------ */

  --radius-xs:    4px;     /* tiny pills, small badges                   */
  --radius-sm:    6px;     /* compact buttons, tags                      */
  --radius-md:    8px;     /* default inputs / buttons / cards           */
  --radius-lg:    10px;    /* larger cards, stat blocks                  */
  --radius-xl:    12px;    /* hero cards, modals                         */
  --radius-2xl:   16px;    /* message bubbles, pronounced containers     */
  --radius-full:  9999px;  /* pills, circles                             */

  /* ------------------------------------------------------------------------
     SHADOWS — soft, warm, sparingly used
     ------------------------------------------------------------------------ */

  --shadow-xs:    0 1px 2px rgba(26, 26, 26, 0.04);
  --shadow-sm:    0 2px 4px rgba(26, 26, 26, 0.06);
  --shadow-md:    0 4px 12px rgba(26, 26, 26, 0.06);
  --shadow-lg:    0 10px 28px rgba(26, 26, 26, 0.08);
  --shadow-xl:    0 20px 48px rgba(26, 26, 26, 0.10);
  --shadow-menu:  -4px 0 20px rgba(26, 26, 26, 0.10);

  /* ------------------------------------------------------------------------
     FOCUS RING
     ------------------------------------------------------------------------ */

  --focus-ring:
    0 0 0 3px rgba(44, 110, 73, 0.18);
  --focus-ring-danger:
    0 0 0 3px rgba(196, 116, 90, 0.22);

  /* ------------------------------------------------------------------------
     MOTION
     ------------------------------------------------------------------------ */

  --duration-fast:    120ms;
  --duration-base:    180ms;
  --duration-slow:    260ms;
  --ease-standard:    cubic-bezier(0.2, 0, 0.2, 1);

  /* ------------------------------------------------------------------------
     LAYOUT
     ------------------------------------------------------------------------ */

  --max-width:         960px;
  --max-width-wide:    1100px;
  --max-width-narrow:  640px;
  --max-width-prose:   680px;
}

/* ============================================================================
   Base element defaults — optional, opt-in by linking this file.
   Pages with their own resets will override these naturally.
   ============================================================================ */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Make the selection colour match the brand, not default blue */
::selection {
  background: var(--color-brand-soft);
  color: var(--color-brand);
}

/* Give keyboard users a visible, on-brand focus ring everywhere */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: var(--color-brand) !important;
}

/* Smooth scrolling inside overflow containers */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ============================================================================
   Utility classes — small, composable. Import selectively in new markup.
   ============================================================================ */

.rapu-card {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.rapu-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-xs);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.5;
}
.rapu-pill--brand  { background: var(--color-brand-soft);    color: var(--color-brand); }
.rapu-pill--gray   { background: var(--color-surface-subtle); color: var(--color-text-muted); }
.rapu-pill--amber  { background: var(--color-warning-bg);    color: var(--color-warning-strong); }
.rapu-pill--danger { background: var(--color-danger-bg);     color: var(--color-danger-strong); }
.rapu-pill--info   { background: var(--color-info-bg);       color: var(--color-info); }

.rapu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
  text-decoration: none;
}
.rapu-btn--primary {
  background: var(--color-brand);
  color: var(--color-text-inverse);
}
.rapu-btn--primary:hover   { background: var(--color-brand-hover); }
.rapu-btn--primary:active  { background: var(--color-brand-active); }

.rapu-btn--secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.rapu-btn--secondary:hover { border-color: var(--color-border-strong); }

.rapu-btn--ghost {
  background: transparent;
  color: var(--color-text-secondary);
}
.rapu-btn--ghost:hover {
  background: var(--color-surface-warm);
  color: var(--color-text);
}

.rapu-input {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-md);
  color: var(--color-text);
  transition: border-color var(--duration-base) var(--ease-standard);
}
.rapu-input:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: var(--focus-ring);
}

/* Muted helper text — use for form hints, metadata, captions */
.rapu-muted {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* A consistent skeleton for empty states */
.rapu-empty {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  color: var(--color-text-muted);
}
.rapu-empty .rapu-empty-icon {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-3);
}
.rapu-empty .rapu-empty-title {
  color: var(--color-text);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-1);
}

/* Mono-spaced text for code snippets, IDs, paths */
.rapu-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}