/* ═══════════════════════════════════════════════════════════════════════════
   TOPICK COLOR TOKEN SYSTEM
   
   Source: topick_frontend/claude_design/flutter_topick/lib/theme/app_colors.dart
           topick_frontend/lib/flutter_flow/flutter_flow_theme.dart
   
   A neutral, editorial palette warmed slightly off-true-grey, with a single
   turquoise brand accent (#28B5AB) used sparingly so it stays distinctive.
   
   Two modes: Light (bone/paper) and Dark (card gradient).
   Both are used throughout the landing page for visual contrast.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ═══ SURFACES — warm near-whites (light mode) ═══ */
  --color-bone:       #F7F5F1;  /* app background — the main light surface */
  --color-bone-2:     #ECE9E3;  /* subtle fills, tracks, secondary surfaces */
  --color-paper:      #FDFCFA;  /* cards — brighter than bone for elevation */

  /* ═══ INK — warm near-blacks (text hierarchy) ═══ */
  --color-ink:        #2B2926;  /* primary text — warm, not harsh #000 */
  --color-ink-2:      #56524B;  /* secondary text — body, descriptions */
  --color-muted:      #837D74;  /* labels, captions, tertiary info */
  --color-faint:      #B1ABA2;  /* inactive, disabled, placeholder */
  --color-hair:       #DEDAD2;  /* hairline borders — subtle separation */

  /* ═══ BRAND ACCENT — turquoise (used sparingly) ═══ */
  --color-accent:          #28B5AB;  /* primary brand color — buttons, links, active states */
  --color-accent-ink:      #0F726A;  /* accent text on light backgrounds */
  --color-accent-tint:     #DEF3F0;  /* accent fills — backgrounds, badges, highlights */
  --color-accent-bright:   #6FE0D5;  /* gradient partner for the accent */

  /* ═══ DARK CARD GRADIENT (the app's Practice Card) ═══ */
  --color-card-top:     #1B5F58;  /* gradient start — dark teal */
  --color-card-mid:     #0E3C38;  /* gradient middle — deep teal */
  --color-card-bottom:  #0A2826;  /* gradient end — darkest teal (page bg) */

  /* ═══ SECONDARY PALETTE (FlutterFlow theme mapped tokens) ═══ */
  --color-secondary:     #9ACCBE;  /* muted soft teal — dark mode primary, glow accents */
  --color-tertiary:      #7CB9B0;  /* muted sage-teal — dividers, dark mode secondary */
  --color-fourtiary:     #D1B87E;  /* muted warm tan — dark mode alt accent */

  /* ═══ SEMANTIC — feedback colors ═══ */
  --color-success:  #8CB89B;  /* muted sage green — success states */
  --color-warning:  #D1B87E;  /* muted warm tan — warning states */
  --color-error:    #C49191;  /* muted dusty rose — error states */

  /* ═══ STAT CARD ACCENT COLORS ═══ */
  --color-stat-blue:        #9BB8D4;  /* muted soft blue */
  --color-stat-green:       #9DC4A3;  /* muted soft green */
  --color-stat-orange:      #D4BE96;  /* muted warm tan */
  --color-stat-deep-orange: #D4A894;  /* muted peach */

  /* ═══ GLOW / OVERLAY ═══ */
  --glow-rgb: 154, 204, 190;  /* derived from --color-secondary */

  /* ═══ SLATE ACCENTS (dark mode UI elements) ═══ */
  --color-slate-100:  #F1F5F9;
  --color-slate-200:  #E2E8F0;
  --color-slate-300:  #CBD5E1;
  --color-slate-400:  #94A3B8;

  /* ═══ TOPIC CHIP COLORS (from flutter_flow_theme.dart topicColor extension) ═══ */
  --topic-cyan-1:  #3D8278;  /* deep teal */
  --topic-cyan-2:  #48887D;  /* dark sage-cyan */
  --topic-cyan-3:  #4B8C82;  /* dark mist */
  --topic-cyan-4:  #41887C;  /* dark soft aqua */
  --topic-cyan-5:  #377E74;  /* dark greyish-teal */
  --topic-cyan-6:  #44857C;  /* dark cloud */
  --topic-cyan-7:  #4E917F;  /* dark pale sage */
  --topic-cyan-8:  #468A7E;  /* dark soft seafoam */

  /* ═══ PURE ═══ */
  --color-white:      #FFFFFF;
  --color-black:      #000000;
  --color-transparent: transparent;

  /* ═══ TYPOGRAPHY ═══ */
  --font-primary: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-serif: Georgia, 'Times New Roman', serif;
}

/* ═══════════════════════════════════════════════════════════════════════════
   UTILITY CLASSES — semantic aliases for common use cases
   ═══════════════════════════════════════════════════════════════════════════ */

/* Text colors */
.text-primary    { color: var(--color-ink); }
.text-secondary  { color: var(--color-ink-2); }
.text-muted      { color: var(--color-muted); }
.text-accent     { color: var(--color-accent); }
.text-white      { color: var(--color-white); }
.text-on-dark    { color: var(--color-slate-100); }

/* Backgrounds */
.bg-bone         { background-color: var(--color-bone); }
.bg-paper        { background-color: var(--color-paper); }
.bg-dark         { background-color: var(--color-card-bottom); }
.bg-dark-mid     { background-color: var(--color-card-mid); }
.bg-accent-tint  { background-color: var(--color-accent-tint); }

/* Borders */
.border-hair     { border-color: var(--color-hair); }
.border-accent   { border-color: var(--color-accent); }