/*
 * AgenticAnanse — Design Tokens
 * ============================================================
 * Authoritative CSS custom properties for the ananse Rails app.
 * Import in application.css. Do not hardcode these values anywhere.
 *
 * File: app/assets/stylesheets/tokens.css
 */

:root {

  /* ══════════════════════════════════════════════
     COLOR — PALETTE
     ══════════════════════════════════════════════ */

  /* Core */
  --aa-black:        #0A0A0F;   /* Midnight Black — dominant surface, non-negotiable */
  --aa-black-raised: #13131A;   /* Raised surface — cards, panels */
  --aa-black-inset:  #0D0D14;   /* Inset surface — wells, inputs */
  --aa-gold:         #C9A84C;   /* Kente Gold — primary accent, use sparingly */
  --aa-gold-dim:     rgba(201, 168, 76, 0.10); /* Gold tint for backgrounds */
  --aa-gold-border:  rgba(201, 168, 76, 0.25); /* Gold border */

  /* Text */
  --aa-text:         #F5F0E8;   /* Warm off-white — primary text */
  --aa-text-muted:   #C0C0CE;   /* Secondary text — lightened for dark bg contrast */
  --aa-text-dim:     #8E8E9E;   /* Tertiary / placeholder — lightened from #6A6A7A */
  --aa-text-ghost:   #6A6A7A;   /* Footer, metadata — lightened from #4A4A5A */

  /* Borders */
  --aa-border:       #2A2A3A;   /* Standard border */
  --aa-border-light: rgba(255, 255, 255, 0.06); /* Subtle separator */

  /* Semantic */
  --aa-success:      #5AB85A;   /* Forest Green — success, health high */
  --aa-success-dim:  rgba(90, 184, 90, 0.10);
  --aa-success-border: rgba(90, 184, 90, 0.25);

  --aa-warning:      #E8834A;   /* Terracotta — warning, health low */
  --aa-warning-dim:  rgba(232, 131, 74, 0.10);
  --aa-warning-border: rgba(232, 131, 74, 0.25);

  --aa-danger:       #E05A5A;   /* Error, payment failed */
  --aa-danger-dim:   rgba(224, 90, 90, 0.10);
  --aa-danger-border: rgba(224, 90, 90, 0.25);

  --aa-info:         #5A9AE0;   /* Info states */
  --aa-info-dim:     rgba(90, 154, 224, 0.10);

  /* ══════════════════════════════════════════════
     TYPOGRAPHY
     ══════════════════════════════════════════════ */

  /* Font stacks */
  --aa-font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --aa-font-body:    'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --aa-font-mono:    'IBM Plex Mono', 'JetBrains Mono', 'Fira Code', monospace;

  /* Font sizes */
  --aa-text-xs:   11px;
  --aa-text-sm:   13px;
  --aa-text-base: 15px;
  --aa-text-md:   17px;
  --aa-text-lg:   20px;
  --aa-text-xl:   24px;
  --aa-text-2xl:  30px;
  --aa-text-3xl:  38px;
  --aa-text-4xl:  48px;
  --aa-text-5xl:  60px;

  /* Font weights */
  --aa-weight-normal:    400;
  --aa-weight-medium:    500;
  --aa-weight-semibold:  600;
  --aa-weight-bold:      700;

  /* Line heights */
  --aa-leading-tight:  1.2;
  --aa-leading-snug:   1.4;
  --aa-leading-normal: 1.6;
  --aa-leading-loose:  1.8;

  /* Letter spacing */
  --aa-tracking-tight:  -0.03em;
  --aa-tracking-normal:  0;
  --aa-tracking-wide:    0.05em;
  --aa-tracking-wider:   0.10em;
  --aa-tracking-widest:  0.15em;

  /* ══════════════════════════════════════════════
     SPACING
     ══════════════════════════════════════════════ */

  --aa-space-1:   4px;
  --aa-space-2:   8px;
  --aa-space-3:   12px;
  --aa-space-4:   16px;
  --aa-space-5:   20px;
  --aa-space-6:   24px;
  --aa-space-8:   32px;
  --aa-space-10:  40px;
  --aa-space-12:  48px;
  --aa-space-16:  64px;
  --aa-space-20:  80px;
  --aa-space-24:  96px;

  /* ══════════════════════════════════════════════
     BORDERS & RADIUS
     ══════════════════════════════════════════════ */

  --aa-radius-sm:  4px;
  --aa-radius:     6px;
  --aa-radius-md:  8px;
  --aa-radius-lg:  12px;
  --aa-radius-xl:  16px;
  --aa-radius-full: 9999px;

  /* ══════════════════════════════════════════════
     SHADOWS
     ══════════════════════════════════════════════ */

  --aa-shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --aa-shadow:     0 4px 16px rgba(0,0,0,0.5);
  --aa-shadow-lg:  0 8px 32px rgba(0,0,0,0.6);
  --aa-shadow-gold: 0 0 0 1px rgba(201,168,76,0.25);
  --aa-shadow-gold-glow: 0 0 20px rgba(201,168,76,0.15);

  /* ══════════════════════════════════════════════
     MOTION — web-weaving language
     ══════════════════════════════════════════════ */

  /* Easing: fast in, slow out — confidence without bounce */
  --aa-ease:        cubic-bezier(0.16, 1, 0.3, 1);
  --aa-ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --aa-ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --aa-ease-linear: linear;

  /* Durations */
  --aa-duration-fast:   120ms;
  --aa-duration:        220ms;
  --aa-duration-slow:   380ms;
  --aa-duration-slower: 600ms;

  /* Standard transition (use for most hover/focus states) */
  --aa-transition: all var(--aa-duration) var(--aa-ease);
  --aa-transition-color: color var(--aa-duration) var(--aa-ease),
                          background-color var(--aa-duration) var(--aa-ease),
                          border-color var(--aa-duration) var(--aa-ease);

  /* ══════════════════════════════════════════════
     LAYOUT
     ══════════════════════════════════════════════ */

  --aa-container-sm:   640px;
  --aa-container:      960px;
  --aa-container-lg:  1200px;
  --aa-container-xl:  1440px;

  --aa-nav-height: 64px;

  /* Z-index scale */
  --aa-z-base:    0;
  --aa-z-raised:  10;
  --aa-z-dropdown: 100;
  --aa-z-sticky:   200;
  --aa-z-overlay:  300;
  --aa-z-modal:    400;
  --aa-z-toast:    500;

}

/* ══════════════════════════════════════════════
   LIGHT MODE OVERRIDES
   ══════════════════════════════════════════════ */

[data-theme="light"] {
  --aa-black:        #F5F0E8;
  --aa-black-raised: #EDE8DF;
  --aa-black-inset:  #E6E0D6;
  --aa-gold:         #A8841E;
  --aa-gold-dim:     rgba(168, 132, 30, 0.10);
  --aa-gold-border:  rgba(168, 132, 30, 0.30);
  --aa-text:         #0A0A0F;
  --aa-text-muted:   #3A3A4A;
  --aa-text-dim:     #6A6A7A;
  --aa-text-ghost:   #9A9AAA;
  --aa-border:       #D4CEC4;
  --aa-border-light: rgba(0, 0, 0, 0.06);
}

/*
 * GLOBAL BASE STYLES
 * Keep minimal — Tailwind or custom classes handle the rest
 */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  background-color: var(--aa-black);
  color: var(--aa-text);
  font-family: var(--aa-font-body);
  font-size: var(--aa-text-base);
  line-height: var(--aa-leading-normal);
  margin: 0;
  transition: background-color 300ms var(--aa-ease), color 300ms var(--aa-ease);
}

/* Selection */
::selection {
  background-color: var(--aa-gold-dim);
  color: var(--aa-gold);
}

/* Focus ring — gold for AgenticAnanse */
:focus-visible {
  outline: 2px solid var(--aa-gold);
  outline-offset: 2px;
  border-radius: var(--aa-radius-sm);
}

/* Scrollbar (WebKit) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--aa-black); }
::-webkit-scrollbar-thumb { background: var(--aa-border); border-radius: var(--aa-radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--aa-text-dim); }