/* =============================================================
   Trayo Design System — Colors & Type
   Single source of truth for the design tokens.
   - Variables on :root are dark-mode-by-default (the canonical experience).
   - The .light scope mirrors the auth/landing surface.
   - Semantic classes (.text-h1, .text-body, etc.) compose the tokens.
   ============================================================= */

/* ---------- Webfonts ---------- */
/* Inter + Manrope from Google Fonts; Clash Display from Fontshare. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=clash-display@900&display=swap');

/* ---------- Dark (canonical) ---------- */
:root {
  /* Brand */
  --brand-indigo:        #6366F1;  /* hsl(239 84% 67%) — primary, ring, "Trayo" color */
  --brand-gradient-from: #FFB82B;  /* warm amber — secondary hero gradient start (in-app avatars, in-app hero CTA) */
  --brand-gradient-to:   #FF4F9E;  /* hot pink     — secondary hero gradient end */
  --brand-gradient:      linear-gradient(135deg, #FFB82B 0%, #FF4F9E 100%);

  /* Marketing surface palette
     The live trayo.ai homepage uses CREAM + a grainy PURPLE → SUNSET-ORANGE gradient.
     These are distinct from the in-app brand colors. Do NOT mix them with the app shell. */
  --mk-cream:            #F8F2E2;
  --mk-cream-soft:       #FBF6E8;
  --mk-ink:              #0A0A0A;
  --mk-ink-2:            #2A2A2A;
  --mk-ink-muted:        #6B6B6B;
  --mk-pill-yellow:      #F7D87A;
  --mk-purple:           #7B5DF3;
  --mk-purple-2:         #6D4FE6;
  --mk-purple-deep:      #5C3FD0;
  --mk-sunset-orange:    #FF8B5A;
  --mk-sunset-pink:      #F8A4A0;
  --mk-sunset-peach:     #FFC9A8;

  /* Surfaces (three-depth stack + extras) */
  --bg-shell:            #181C23;  /* App shell, page background */
  --bg-sidebar:          #0E1525;  /* Sidebar — a touch bluer */
  --bg-card:             #232837;  /* Event card body */
  --bg-card-hover:       #252A3A;  /* Event card hover */
  --bg-well:             #1A1F2E;  /* Nested "well" inside a card */
  --bg-well-2:           #1A1F2B;  /* Alt well shade (used interchangeably) */
  --bg-row:              #252B38;  /* Stakeholder row inside a well */
  --bg-popover:          #232837;  /* Floating surfaces (modals, popovers) */
  --bg-muted:            #1A1F2B;  /* Nested panels */
  --bg-secondary:        #282C33;  /* Subtle fills (e.g. tag pill bg) */
  --bg-accent:           #2D3442;  /* Hover states / pressed */
  --bg-surface-elevated: #272D38;  /* Raised surfaces */
  --bg-code:             #10151D;  /* Code blocks */

  /* Foreground / text */
  --fg-1:                #E2E8F0;  /* Body text (--foreground) */
  --fg-card:             #A0AEC0;  /* Body text inside cards (slightly warmer) */
  --fg-2:                #7C8493;  /* Secondary / meta text */
  --fg-muted:            #7C8493;  /* alias */

  /* Borders */
  --border:              #2A3441;  /* Hairline border, all surfaces */
  --border-strong:       #363B4A;  /* Avatar borders */
  --ring:                #6366F1;  /* Focus ring */

  /* Semantic accents */
  --accent-indigo:       #6366F1;
  --accent-indigo-300:   #A5B4FC;
  --accent-indigo-400:   #818CF8;
  --accent-indigo-500:   #6366F1;
  --accent-indigo-600:   #4F46E5;
  --accent-indigo-700:   #4338CA;

  --accent-emerald:      #10B981;
  --accent-emerald-300:  #6EE7B7;
  --accent-emerald-400:  #34D399;
  --accent-emerald-500:  #10B981;

  --accent-amber:        #F59E0B;
  --accent-amber-300:    #FCD34D;
  --accent-amber-400:    #FBBF24;
  --accent-amber-500:    #F59E0B;
  --accent-yellow-500:   #EAB308;

  --accent-red:          #EF4444;
  --accent-red-400:      #F87171;
  --accent-red-500:      #EF4444;

  --accent-violet:       #8B5CF6;
  --accent-violet-300:   #C4B5FD;
  --accent-violet-500:   #8B5CF6;

  --accent-teal-400:     #2DD4BF;

  /* Destructive (alias for the system) */
  --destructive:         #EF4444;

  /* Radii */
  --radius:              0.625rem;  /* 10px — the token */
  --radius-md:           0.375rem;  /*  6px — buttons */
  --radius-lg:           0.5rem;    /*  8px — cards, wells, inputs */
  --radius-xl:           0.75rem;   /* 12px — <Card> primitive, sidebar pills */
  --radius-2xl:          1rem;      /* 16px — Plan tier cards */
  --radius-full:         9999px;

  /* Shadows */
  --shadow-sm:    0 1px 2px 0 rgba(0, 0, 0, 0.20);
  --shadow-card:  0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-menu:  0 25px 50px -12px rgba(0, 0, 0, 0.50);                   /* floating menus */
  --shadow-hero:  0 25px 50px -12px rgba(99, 102, 241, 0.10);              /* indigo-tinted glow */

  /* Type tokens */
  --font-sans:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-manrope: 'Manrope', var(--font-sans);
  --font-clash:   'Clash Display', var(--font-sans);
  --font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  /* Chart palette (OKLCH) */
  --chart-1: oklch(0.690 0.190 61.30);   /* warm orange */
  --chart-2: oklch(0.640 0.224 348.32);  /* magenta */
  --chart-3: oklch(0.537 0.149 264.05);  /* indigo */
  --chart-4: oklch(0.828 0.189 84.43);   /* yellow */
  --chart-5: oklch(0.769 0.188 70.08);   /* gold */
}

/* ---------- Light (auth / landing only) ---------- */
.light, :root[data-theme='light'] {
  --bg-shell:    #FFFFFF;
  --bg-sidebar:  #F8FAFC;
  --bg-card:     #FFFFFF;
  --bg-well:     #F1F5F9;
  --bg-popover:  #FFFFFF;
  --bg-muted:    #F1F5F9;
  --bg-secondary:#E2E8F0;
  --bg-accent:   #E2E8F0;

  --fg-1:        #0F172A;
  --fg-card:     #1F2937;
  --fg-2:        #475569;
  --fg-muted:    #64748B;

  --border:      #E2E8F0;
  --border-strong: #CBD5E1;
}

/* =============================================================
   Semantic type classes — compose the tokens.
   Use these in HTML instead of re-declaring sizes ad-hoc.
   ============================================================= */

html, body {
  font-family: var(--font-sans);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  background: var(--bg-shell);
  color: var(--fg-1);
}

/* Display — wordmark / hero only */
.text-display,
.text-wordmark {
  font-family: var(--font-clash);
  font-weight: 900;
  letter-spacing: -0.025em; /* tracking-tighter */
  line-height: 1;
}

/* Landing-page hero headline */
.text-hero {
  font-family: var(--font-sans);
  font-size: 2.25rem;   /* text-4xl */
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--fg-1);
}

/* Landing subhead */
.text-subhero {
  font-family: var(--font-sans);
  font-size: 1.25rem;   /* text-xl */
  font-weight: 500;
  line-height: 1.4;
  color: var(--fg-2);
}

/* Page heading (e.g. "Users", "Dashboard") */
.text-page {
  font-size: 1.5rem;    /* 24px */
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}

/* Section heading inside a card */
.text-h1 { font-size: 1.125rem; font-weight: 600; color: var(--fg-1); letter-spacing: -0.005em; }
.text-h2 { font-size: 1rem;     font-weight: 600; color: var(--fg-1); }
.text-h3 { font-size: 0.875rem; font-weight: 600; color: var(--fg-1); }

/* Body */
.text-body {
  font-size: 0.875rem;  /* 14px */
  line-height: 1.6;
  color: var(--fg-card);
}
.text-body-strong { color: var(--fg-1); }

/* Meta / timestamps */
.text-meta {
  font-size: 0.75rem;   /* text-xs */
  color: var(--fg-2);
  line-height: 1.4;
}

/* Sidebar nav label */
.text-nav {
  font-size: 0.9375rem; /* 15px */
  font-weight: 600;
  color: var(--fg-1);
}

/* Button label */
.text-button {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* Plan badge — ALL CAPS, tight */
.text-badge-allcaps {
  font-size: 0.625rem;  /* 10px */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em; /* tracking-wider */
}

/* Tabular numbers in tables */
.text-tabular { font-variant-numeric: tabular-nums; }

/* Code */
.text-code {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  background: var(--bg-code);
  border-radius: var(--radius-md);
  padding: 0.125rem 0.375rem;
  color: var(--fg-1);
}

/* =============================================================
   Brand gradient helpers (auth/marketing only — do NOT use in app shell)
   ============================================================= */
.logo-gradient {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.button-gradient {
  background: var(--brand-gradient);
  box-shadow: 0 4px 15px rgba(255, 75, 158, 0.20);
  transition: transform 0.3s, box-shadow 0.3s;
}
.button-gradient:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 75, 158, 0.30); }

/* In-app primary button gradient (the workhorse) */
.button-indigo {
  background: linear-gradient(to right, var(--accent-indigo-500), var(--accent-indigo-700));
  color: #FFFFFF;
}

/* Active nav pill (the inversion) */
.nav-active {
  background: linear-gradient(to right, #FFFFFF, #EFF6FF, #93C5FD);
  color: #0F172A;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05);
  --tw-ring-color: #BFDBFE;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05), 0 0 0 1px #BFDBFE inset;
}

/* Tinted ghost chip recipe — pass color name to the data-attr */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
}
.chip[data-tone='indigo']  { background: rgba(99,102,241,0.20);  color: var(--accent-indigo-300); box-shadow: inset 0 0 0 1px rgba(129,140,248,0.30); }
.chip[data-tone='emerald'] { background: rgba(16,185,129,0.20);  color: var(--accent-emerald-300); box-shadow: inset 0 0 0 1px rgba(52,211,153,0.30); }
.chip[data-tone='amber']   { background: rgba(245,158,11,0.18);  color: var(--accent-amber-300);   box-shadow: inset 0 0 0 1px rgba(251,191,36,0.30); }
.chip[data-tone='red']     { background: rgba(239,68,68,0.18);   color: #FCA5A5;                   box-shadow: inset 0 0 0 1px rgba(248,113,113,0.30); }
.chip[data-tone='violet']  { background: rgba(139,92,246,0.18);  color: var(--accent-violet-300);  box-shadow: inset 0 0 0 1px rgba(167,139,250,0.30); }
.chip[data-tone='slate']   { background: rgba(71,85,105,0.50);   color: #94A3B8;                   box-shadow: inset 0 0 0 1px rgba(100,116,139,0.50); }

/* Scrollbar (global) */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* Focus ring (the token-driven baseline) */
:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--ring) 50%, transparent);
  outline-offset: 2px;
}