/* ============================================================
   Illypad Design Tokens
   ============================================================
   This file is the ONLY place you need to touch to restyle
   the entire app. All component CSS in illypad.css reads
   from these variables.

   TUNING GUIDE:
   - Swap accent color: change --accent + --accent-dark only
   - Go darker/lighter overall: adjust --bg-page + --bg-surface
   - Change roundness: adjust --radius + --radius-lg
   - Make it feel faster/slower: adjust --duration
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     ACCENT — the single brand color used for buttons,
     active states, links, and focus rings.
     Current: Indigo (ultra modern SaaS, 2025-26 dominant)
     Swap ideas: #0D9488 teal | #8B5CF6 violet | #F59E0B amber
  ---------------------------------------------------------- */
  --accent:        #6366F1;
  --accent-dark:   #4F46E5;   /* hover/active state */
  --accent-light:  #EEF2FF;   /* subtle tinted backgrounds */
  --accent-subtle: #C7D2FE;   /* borders, rings, chips */
  --accent-text:   #4338CA;   /* text on light bg (accessible) */


  /* ----------------------------------------------------------
     NEUTRALS — slate-based (cooler than gray, more modern)
  ---------------------------------------------------------- */
  --bg-page:       #F8FAFC;   /* outermost app background */
  --bg-surface:    #FFFFFF;   /* cards, panels, inputs */
  --bg-elevated:   #F1F5F9;   /* hover states, subtle insets */
  --bg-overlay:    rgba(15, 23, 42, 0.5);  /* modal backdrops */

  --border:        #E2E8F0;   /* default border */
  --border-strong: #CBD5E1;   /* emphasized borders */
  --border-focus:  var(--accent-subtle);   /* input focus ring */

  --text-primary:  #0F172A;   /* headings, strong content */
  --text-secondary:#475569;   /* body text, labels */
  --text-muted:    #94A3B8;   /* placeholders, captions */
  --text-inverse:  #FFFFFF;   /* text on dark backgrounds */
  --text-accent:   var(--accent-text);


  /* ----------------------------------------------------------
     SIDEBAR — dark sidebar is the ultra modern SaaS standard
     (Linear, Vercel, Supabase, Resend all use this pattern)
  ---------------------------------------------------------- */
  --sidebar-bg:          #0F172A;   /* near-black slate */
  --sidebar-border:      #1E293B;   /* subtle divider */
  --sidebar-text:        #64748B;   /* inactive nav items */
  --sidebar-text-hover:  #CBD5E1;   /* hovered nav items */
  --sidebar-text-active: #FFFFFF;   /* active nav item */
  --sidebar-icon:        #475569;   /* inactive icons */
  --sidebar-icon-active: #FFFFFF;   /* active icons */
  --sidebar-active-bg:   rgba(99, 102, 241, 0.15);  /* active item bg */
  --sidebar-active-border: var(--accent);            /* left accent bar */
  --sidebar-badge-bg:    #1E293B;   /* client badge background */
  --sidebar-w:           240px;
  --sidebar-w-collapsed: 56px;


  /* ----------------------------------------------------------
     TOPBAR
  ---------------------------------------------------------- */
  --topbar-h:      56px;
  --topbar-bg:     var(--bg-surface);
  --topbar-border: var(--border);


  /* ----------------------------------------------------------
     TYPOGRAPHY
     Plus Jakarta Sans = headings (modern, geometric)
     Inter = body (the readable standard)
  ---------------------------------------------------------- */
  --font-head:  'Plus Jakarta Sans', sans-serif;
  --font-body:  'Inter', sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:    0.6875rem;   /* 11px */
  --text-sm:    0.8125rem;   /* 13px */
  --text-base:  0.9375rem;   /* 15px — slightly tighter than 16 */
  --text-md:    1rem;        /* 16px */
  --text-lg:    1.125rem;    /* 18px */
  --text-xl:    1.25rem;     /* 20px */
  --text-2xl:   1.5rem;      /* 24px */
  --text-3xl:   1.875rem;    /* 30px */
  --text-4xl:   2.25rem;     /* 36px */

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

  --leading-tight:   1.2;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  --tracking-tight:  -0.02em;
  --tracking-normal: -0.01em;
  --tracking-wide:   0.02em;
  --tracking-wider:  0.05em;


  /* ----------------------------------------------------------
     SPACING (4px base grid)
  ---------------------------------------------------------- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;


  /* ----------------------------------------------------------
     RADII — User chose rounded (14–16px)
     sm = small elements (badges, tags)
     base = inputs, buttons
     lg = cards, panels
     xl = modals, large surfaces
  ---------------------------------------------------------- */
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius:      12px;   /* inputs, buttons, small cards */
  --radius-lg:   16px;   /* cards, panels */
  --radius-xl:   20px;   /* modals, overlays */
  --radius-full: 9999px; /* pills, avatars */


  /* ----------------------------------------------------------
     SHADOWS — soft and layered (not dramatic)
  ---------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow:    0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 20px 25px -5px rgba(15, 23, 42, 0.10), 0 8px 10px -6px rgba(15, 23, 42, 0.06);
  --shadow-xl: 0 25px 50px -12px rgba(15, 23, 42, 0.18);

  /* Colored shadow for accent buttons (feels premium) */
  --shadow-accent: 0 4px 14px rgba(99, 102, 241, 0.35);


  /* ----------------------------------------------------------
     MOTION
  ---------------------------------------------------------- */
  --duration:      150ms;
  --duration-slow: 250ms;
  --duration-page: 200ms;
  --ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1); /* subtle bounce */


  /* ----------------------------------------------------------
     STATUS COLORS
  ---------------------------------------------------------- */
  --green:         #10B981;
  --green-dark:    #059669;
  --green-light:   #D1FAE5;
  --green-text:    #065F46;

  --red:           #EF4444;
  --red-dark:      #DC2626;
  --red-light:     #FEE2E2;
  --red-text:      #991B1B;

  --yellow:        #F59E0B;
  --yellow-dark:   #D97706;
  --yellow-light:  #FEF3C7;
  --yellow-text:   #92400E;

  --blue:          #3B82F6;
  --blue-dark:     #2563EB;
  --blue-light:    #DBEAFE;
  --blue-text:     #1D4ED8;

  --purple:        #8B5CF6;
  --purple-light:  #EDE9FE;
  --purple-text:   #5B21B6;


  /* ----------------------------------------------------------
     LAYOUT
  ---------------------------------------------------------- */
  --content-max:   1280px;
  --content-pad:   var(--sp-8);


  /* ----------------------------------------------------------
     PLATFORM BRAND COLORS (Instagram, Facebook)
     These are third-party brand colors — fixed, not themeable.
  ---------------------------------------------------------- */
  --ig-brand:       #E1306C;
  --ig-brand-bg:    #FFF0F5;
  --ig-brand-text:  #C2185B;
  --fb-brand:       #1877F2;
  --fb-brand-bg:    #E8F0FE;
  --fb-brand-text:  #1565C0;


  /* ----------------------------------------------------------
     PHONE MOCKUP (device-shell colors — always neutral dark)
  ---------------------------------------------------------- */
  --phone-shell:    #111111;
  --phone-bezel:    #333333;

}


/* ============================================================
   DARK MODE (system preference)
   Override the variables that need to flip.
   Component CSS needs no changes.
============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-page:       #0B0F19;
    --bg-surface:    #111827;
    --bg-elevated:   #1F2937;
    --bg-overlay:    rgba(0, 0, 0, 0.7);

    --border:        #1F2937;
    --border-strong: #374151;

    --text-primary:  #F1F5F9;
    --text-secondary:#9CA3AF;
    --text-muted:    #4B5563;

    /* Sidebar stays dark but shifts slightly */
    --sidebar-bg:    #080C15;
    --sidebar-border:#111827;

    --topbar-bg:     #111827;
    --topbar-border: #1F2937;

    --accent-light:  rgba(99, 102, 241, 0.15);
    --accent-subtle: rgba(99, 102, 241, 0.4);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow:    0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
  }
}