/* ==========================================================================
   DESIGN TOKENS — Replicord dark-first SaaS aesthetic
   Solar gradient (amber → orange → red) · Geist · glassmorphism

   Kopia public/styles/tokens.css — public-radar/ jest samodzielne (serwowane
   przez osobny blok nginx dla radar.replicord.com, bez dostępu do /public),
   więc tokeny trzymamy tu lokalnie. Zmienia się rzadko; przy zmianie palety
   głównej appki zsynchronizuj ręcznie.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300..800&family=Geist+Mono:wght@400..600&display=swap');

:root {

  /* ====================================================================
     BRAND — Solar gradient
     ==================================================================== */
  --brand-amber:       #FDE047;
  --brand-orange:      #F97316;
  --brand-red:         #DC2626;
  --gradient-brand:    linear-gradient(135deg, #FDE047 0%, #F97316 50%, #DC2626 100%);
  --gradient-brand-soft: linear-gradient(135deg, rgba(253,224,71,0.18) 0%, rgba(249,115,22,0.18) 50%, rgba(220,38,38,0.18) 100%);

  /* ====================================================================
     SURFACES — dark stack
     ==================================================================== */
  --bg-0:   #0B0D12;
  --bg-1:   #111521;
  --bg-2:   #141A2A;
  --bg-3:   #1A2133;
  --bg-4:   #232838;

  /* ====================================================================
     BORDERS
     ==================================================================== */
  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong:  rgba(255, 255, 255, 0.16);

  /* ====================================================================
     TEXT
     ==================================================================== */
  --fg-1:  #EDEFF5;
  --fg-2:  #A7AFBF;
  --fg-3:  #6B7385;
  --fg-4:  #4A5163;

  /* ====================================================================
     SEMANTIC STATUS
     ==================================================================== */
  --success:       #84CC16;
  --success-soft:  rgba(132, 204, 22, 0.14);
  --warning:       #EAB308;
  --warning-soft:  rgba(234, 179, 8, 0.14);
  --danger:        #F43F5E;
  --danger-soft:   rgba(244, 63, 94, 0.14);
  --info:          #14B8A6;
  --info-soft:     rgba(20, 184, 166, 0.14);

  /* ====================================================================
     TYPOGRAPHY
     ==================================================================== */
  --font-family-sans: 'Geist', 'SF Pro Text', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-family-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --font-size-base: 16px;
  --font-size-xs:   0.75rem;    /* 12px */
  --font-size-sm:   0.875rem;   /* 14px */
  --font-size-md:   1rem;       /* 16px */
  --font-size-lg:   1.125rem;   /* 18px */

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* ====================================================================
     SPACING — 8px baseline
     ==================================================================== */
  --spacing-xs: 0.25rem;   /* 4px  */
  --spacing-sm: 0.5rem;    /* 8px  */
  --spacing-md: 1rem;      /* 16px */
  --spacing-lg: 1.5rem;    /* 24px */
  --spacing-xl: 2rem;      /* 32px */

  /* ====================================================================
     CORNER RADII
     ==================================================================== */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   18px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ====================================================================
     SHADOWS — soft ambient, no hard drops
     ==================================================================== */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.30);
  --shadow-md:  0 8px 24px rgba(0,0,0,0.36);
  --shadow-lg:  0 18px 48px rgba(0,0,0,0.45);
}

/* ==========================================================================
   LIGHT MODE — paleta z Replicord Design Kit
   ========================================================================== */
[data-theme="light"] {
  --bg-0: #EDECEA;
  --bg-1: #F4F3F1;
  --bg-2: #FAF9F7;
  --bg-3: #E5E4E0;
  --bg-4: #D8D6D2;

  --border-subtle:  rgba(20, 18, 15, 0.07);
  --border-default: rgba(20, 18, 15, 0.12);
  --border-strong:  rgba(20, 18, 15, 0.20);

  --fg-1: #1F1E1C;
  --fg-2: #504E4A;
  --fg-3: #787470;
  --fg-4: #A09C97;

  --success:      #2A8F62;
  --success-soft: rgba(42, 143, 98, 0.12);
  --warning:      #B5780C;
  --warning-soft: rgba(181, 120, 12, 0.12);
  --danger:       #C22840;
  --danger-soft:  rgba(194, 40, 64, 0.12);
  --info:         #1572A6;
  --info-soft:    rgba(21, 114, 166, 0.12);

  --shadow-sm: 0 1px 3px rgba(20,18,15,0.07), 0 1px 2px rgba(20,18,15,0.04);
  --shadow-md: 0 8px 24px rgba(20,18,15,0.09);
  --shadow-lg: 0 18px 48px rgba(20,18,15,0.13);
}