@tailwind base;

@layer base {
  :root {
    /* =========================
     Brand Colors
     ========================= */
    --brand-dark-lavender: 267 47% 29%;
    --brand-purple: 256 35% 47%;
    --brand-lavender: 262 46% 80%;
    --brand-light-lavender: 256 32% 88%;
    --brand-white: 0 0% 100%;

    --brand-dark-orange: 13 100% 42%;
    --brand-orange: 24 86% 55%;
    --brand-light-orange: 24 100% 67%;

    --brand-pink: 324 55% 60%;
    --dusty-pink: 323 39% 52%;
    --dark-rose: 324 98% 32%;

    /* 
    ==========================
      Social Media Colors
    ==========================
     */

    --blue-linkedin: #0a66c2;
    --blue-facebook: #1877f2;
    --blue-twitter: #1da1f2;
    --red-instagram: #e4405f;

    /* =========================
     Theme Colors
     ========================= */
    --background: 0 0% 100%;
    --foreground: 280 47% 27%;

    --card: 0 0% 100%;
    --card-foreground: 280 47% 27%;

    --popover: 0 0% 100%;
    --popover-foreground: 280 47% 27%;

    --primary: 280 47% 27%;
    --primary-foreground: 0 0% 100%;

    --secondary: var(--brand-lavender);
    --secondary-foreground: 280 47% 27%;

    --muted: 268 43% 95%;
    --muted-foreground: 268 35% 47%;

    --accent: var(--brand-orange);
    --accent-foreground: 280 47% 27%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

    --success: 147 23% 46%;
    --success-foreground: 0 0% 98%;

    --warning: var(--brand-orange);
    --warning-foreground: 0 0% 10%;

    --border: 268 33% 89%;
    --input: 268 33% 89%;
    --ring: 268 35% 47%;
    --chart-1: 268 36% 46%;
    --chart-2: 17 100% 73%;
    --chart-3: 268 33% 89%;
    --chart-4: 280 44% 29%;
    --chart-5: 268 35% 47%;
    --radius: 0.5rem;

    --purple-ink: #422268;
    --purple-ink-2: #422268;
    --purple-deep: #48286e;
    --purple-muted: #533a82;
    --purple-plum: #553d8a;
    --purple-soft: #5a4290;
    --purple-amethyst: #644c9f;
    --purple-lilac: #664ea2;
    --purple-lavender: #664fa3;
    --purple-electric: #865edf;
    --slate-dark: #3d405b;
    --slate-muted: #6b708d;
    --slate-600: #6b7280;
    --slate-400: #9ca3af;
    --slate-dark: #3d405b;
    --slate-muted: #6b708d;
    --slate-600: #6b7280;
    --slate-400: #9ca3af;
    --green-success: #4caf50;
    --green-sage: #5a8f72;
    --green-muted: #66927e;
    --green-soft: #6a9680;
    --green-eucalyptus: #6a9a83;
    --green-forest: #5a7d68;
    --green-fern: #6da085;
    --green-mint: #6fa087;
    --green-pastel: #6fa188;
    --green-light: #81b29a;
    --green-bg: #e8f5e9;
    --orange-rust: #d16b54;
    --orange-soft: #e07a5f;
    --orange-peach: #e88a63;
    --orange-sand: #e88d66;
    --orange-apricot: #ff8c5a;
    --orange-coral: #ff8c64;
    --orange-light: #ff9e77;
    --orange-500: #ea580c;
    --orange-400: #fb923c;
    --gold-soft: #e8bf7a;
    --gold-warm: #f2cc8f;
    --gold-soft: #e8bf7a;
    --gold-warm: #f2cc8f;
    --red-soft: #ffebee;
    --lavender-100: #e8e0f5;
    --lavender-200: #eeebf4;
    --lavender-300: #f1eef9;
    --lavender-400: #f9f5ff;
    --lavender-500: #f8f7fb;
    --lavender-600: #f9f7fc;
    --lavender-700: #f9f8fb;
    --lavender-800: #eaedf4;
    --neutral-50: #fafafa;
    --neutral-100: #f9fafb;
    --neutral-200: #fdfcf8;
    --neutral-300: #eae0d5;
    --neutral-400: #c4bed8;
    --neutral-500: #c5b4e3;
    --neutral-600: #c5bfd9;
    --neutral-700: #dcd7ea;
    --neutral-800: #ddd8eb;
    --neutral-900: #ffffff;
  }
  .dark {
    /* 
    ==========================
      Dark Theme Colors
    ==========================
    */

    --background: 246 28% 8%;
    --foreground: 255 30% 92%;

    --card: 248 26% 11%;
    --card-foreground: 255 30% 92%;

    --popover: 248 26% 12%;
    --popover-foreground: 255 30% 92%;

    --primary: 262 70% 72%;
    --primary-foreground: 246 28% 10%;

    --secondary: 262 22% 18%;
    --secondary-foreground: 255 30% 92%;

    --muted: 252 18% 15%;
    --muted-foreground: var(--brand-lavender);

    --accent: var(--brand-light-orange);
    --accent-foreground: 246 28% 10%;

    --destructive: 0 78% 56%;
    --destructive-foreground: 0 0% 98%;

    --border: 255 14% 22%;
    --input: 255 14% 20%;
    --ring: 262 70% 72%;

    /* charts (tuned for dark backgrounds) */
    --chart-1: 262 70% 72%;
    --chart-2: var(--dark-rose);
    --chart-3: 168 48% 52%;
    --chart-4: 286 64% 70%;
    --chart-5: 210 70% 66%;

    --radius: 0.5rem;

    /* 
    =========================
      Brand Colors
    =========================
    */

    --brand-purple: 262 46% 80%;

    /* -------- Purples (Primary UI) -------- */
    --purple-ink: #422268; /* deepest background */
    --purple-ink: hsl(var(--brand-light-lavender)); /* deepest background */
    --purple-ink-2: #422268;
    --purple-deep: #24153a; /* app shell */
    --purple-muted: #34204f; /* panels */
    --purple-plum: #3f2760;
    --purple-soft: #4b3374;
    --purple-amethyst: #5c45a0;
    --purple-lilac: #6a55b8;
    --purple-lavender: #664fa3;
    --purple-electric: #9b7cff; /* accents / focus */

    /* -------- Slate / Text Neutrals -------- */
    --slate-dark: #0f1020; /* page background */
    --slate-muted: #2b2f44; /* borders / dividers */
    --slate-600: #8b90a8; /* secondary text */
    --slate-400: #c7cad6; /* primary text */

    /* -------- Greens (Success / Calm) -------- */
    --green-success: #3ddc84;
    --green-sage: #4fa38a;
    --green-muted: #5fb39a;
    --green-soft: #6fc4aa;
    --green-eucalyptus: #7dd3b0;
    --green-fern: #315446;
    --green-mint: #8be0bc;
    --green-forest: #5e8374;
    --green-pastel: #a6ecd1;
    --green-light: #66a38b;
    --green-bg: #0f2a1e;

    /* -------- Oranges (Warnings / Energy) -------- */
    --orange-rust: #b4533c;
    --orange-soft: #c8654c;
    --orange-peach: #d97757;
    --orange-sand: #e08966;
    --orange-apricot: #ff9f6e;
    --orange-coral: #ff8a75;
    --orange-light: #ffab91;
    --orange-500: #f97316;
    --orange-400: #fb923c;

    /* -------- Golds -------- */
    --gold-soft: #e3c07a;
    --gold-warm: #f5d89c;

    /* -------- Reds -------- */

    --red-soft: #3a141c;

    /* -------- Lavender UI Layers -------- */
    --lavender-100: #1c142c;
    --lavender-200: #241a38;
    --lavender-300: #2c2145;
    --lavender-400: #342952;
    --lavender-500: #211c35;
    --lavender-600: #45396e;
    --lavender-700: #4e417d;
    --lavender-800: #584a8c;

    /* -------- Neutral Surfaces -------- */
    --neutral-50: #0b0b10; /* deepest bg */
    --neutral-100: #12121a;
    --neutral-200: #1a1a24;
    --neutral-300: #232330;
    --neutral-400: #2f2f40;
    --neutral-500: #3b3b52;
    --neutral-600: #515170;
    --neutral-700: #77779a;
    --neutral-800: var(--lavender-300); /* lightest bg */
    --neutral-900: #f4f4ff; /* highest contrast text */
  }
}