/**
 * GoInNative Design Tokens
 * Loaded after preline-main.min.css — overrides the active brand's primary scale
 * and injects brand-specific tokens (gold accent, Poppins font).
 *
 * Strategy: define a [data-brand="goinnative"] block so the html element can
 * simply carry data-brand="goinnative". All Preline components read --primary-*
 * from whichever brand block is active.
 *
 * Green scale anchored on #00d084 at 500:
 *   50  #e6fff6   100 #b3ffe4   200 #80ffd2   300 #33d99d   400 #1ad4a0
 *   500 #00d084   600 #059669   700 #047857   800 #065f46   900 #064e3b
 *   950 #022c22
 */

/* ─── Font ─────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ─── GoInNative brand color scale ─────────────────────────────────────────── */
[data-brand="goinnative"] {
  --color-primary-50:  #e6fff6;
  --color-primary-100: #b3ffe4;
  --color-primary-200: #80ffd2;
  --color-primary-300: #33d99d;
  --color-primary-400: #1ad4a0;
  --color-primary-500: #00d084;
  --color-primary-600: #059669;
  --color-primary-700: #047857;
  --color-primary-800: #065f46;
  --color-primary-900: #064e3b;
  --color-primary-950: #022c22;
}

/*
 * Numbered primary scale. Preline binds bg-primary-N / text-primary-N /
 * ring-primary-N to var(--primary-N), and its default theme points those at
 * the blue palette on :root. Re-point them at the GoInNative green scale.
 * Selector specificity (0,2,0) beats Preline's :root (0,1,0) and ties the
 * per-theme :root[data-theme=...] blocks, winning on source order.
 */
:root[data-brand="goinnative"] {
  --primary-50:  var(--color-primary-50);
  --primary-100: var(--color-primary-100);
  --primary-200: var(--color-primary-200);
  --primary-300: var(--color-primary-300);
  --primary-400: var(--color-primary-400);
  --primary-500: var(--color-primary-500);
  --primary-600: var(--color-primary-600);
  --primary-700: var(--color-primary-700);
  --primary-800: var(--color-primary-800);
  --primary-900: var(--color-primary-900);
  --primary-950: var(--color-primary-950);
}

/* ─── Light mode (default) ──────────────────────────────────────────────────── */
:root,
[data-brand="goinnative"],
html:not(.dark) [data-brand="goinnative"] {
  /* Font */
  --font-custom-default: 'Poppins', system-ui, sans-serif;
  --font-sans: 'Poppins', system-ui, sans-serif;

  /* Primary semantic aliases — consumed by Preline component classes */
  --color-primary:              var(--color-primary-500);
  --color-primary-hover:        var(--color-primary-600);
  --color-primary-focus:        var(--color-primary-600);
  --color-primary-checked:      var(--color-primary-600);
  --color-primary-foreground:   #ffffff;
  --color-primary-line:         var(--color-primary-600);

  /* Gold accent */
  --color-accent-gold:          #D4AF37;
  --color-accent-gold-hover:    #b8952e;
  --color-accent-gold-foreground: #0F172A;
  --color-accent-gold-tonal:    rgba(212, 175, 55, 0.15);

  /* Backgrounds — light surfaces */
  --color-background:           #F8FAFC;
  --color-background-1:         #F1F5F9;
  --color-background-2:         #E2E8F0;

  /* Text */
  --color-foreground:           #0F172A;
  --color-foreground-inverse:   #ffffff;
  --color-muted-foreground:     #64748B;
  --color-muted-foreground-1:   #94A3B8;

  /* Borders */
  --color-border:               #CBD5E1;
  --color-border-line-1:        #E2E8F0;
}

/* ─── Dark mode ─────────────────────────────────────────────────────────────── */
.dark,
.dark [data-brand="goinnative"],
html.dark {
  /* Font (repeated so dark doesn't lose override) */
  --font-custom-default: 'Poppins', system-ui, sans-serif;
  --font-sans: 'Poppins', system-ui, sans-serif;

  /* Primary scale stays the same; semantic aliases shift for dark contrast */
  --color-primary:              var(--color-primary-400);
  --color-primary-hover:        var(--color-primary-300);
  --color-primary-focus:        var(--color-primary-300);
  --color-primary-checked:      var(--color-primary-400);
  --color-primary-foreground:   #0a0a0a;
  --color-primary-line:         var(--color-primary-500);

  /* Gold accent */
  --color-accent-gold:          #D4AF37;
  --color-accent-gold-hover:    #e6c84a;
  --color-accent-gold-foreground: #0F172A;
  --color-accent-gold-tonal:    rgba(212, 175, 55, 0.20);

  /* Backgrounds — dark slate */
  --color-background:           #0a0a0a;
  --color-background-1:         #0F172A;
  --color-background-2:         #1E293B;

  /* Text */
  --color-foreground:           #F8FAFC;
  --color-foreground-inverse:   #0F172A;
  --color-muted-foreground:     #94A3B8;
  --color-muted-foreground-1:   #64748B;

  /* Borders */
  --color-border:               #334155;
  --color-border-line-1:        #1E293B;
}

/* ─── Gold accent utility classes ───────────────────────────────────────────── */
.bg-accent-gold {
  background-color: var(--color-accent-gold);
}
.text-accent-gold {
  color: var(--color-accent-gold);
}
.text-accent-gold-foreground {
  color: var(--color-accent-gold-foreground);
}
.bg-accent-gold-tonal {
  background-color: var(--color-accent-gold-tonal);
}
.border-accent-gold {
  border-color: var(--color-accent-gold);
}
.hover\:bg-accent-gold:hover {
  background-color: var(--color-accent-gold-hover);
}

/* Gold highlight pill — used in nav/badges for premium/featured items */
.badge-gold {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.25rem;
  background-color: var(--color-accent-gold);
  color: var(--color-accent-gold-foreground);
}

/* ─── Poppins body enforcement ───────────────────────────────────────────────── */
body {
  font-family: var(--font-sans);
}