/* ============================================================
   ProLiftix — Color tokens
   Faithful to apps/web (shadcn/ui + Tailwind HSL token pattern).
   Brand primary is a deep crimson; the logo identity adds a
   brushed-steel / chrome neutral family.
   ============================================================ */

:root {
  /* ---- Brand: Crimson (the "LIFTIX" red) ---- */
  --crimson-50:  #f0f8f8;
  --crimson-100: #e3f2f3;
  --crimson-200: #c3e4e6;
  --crimson-300: #8ecdd2;
  --crimson-400: #3baab3;
  --crimson-500: #0a8a94;  /* dark-mode primary / bright accent */
  --crimson-600: #006d75;  /* PRIMARY — used literally across the app */
  --crimson-700: #00545c;
  --crimson-800: #003b40;
  --crimson-900: #002a2e;

  /* ---- Brand: Steel / Chrome (the "PRO" metallic mark) ---- */
  --steel-50:  #f7f8fa;
  --steel-100: #edeff2;
  --steel-200: #d9dce1;
  --steel-300: #b9bec7;
  --steel-400: #8d94a0;
  --steel-500: #6b7280;
  --steel-600: #4b5563;
  --steel-700: #374151;
  --steel-800: #1f2530;
  --steel-900: #11151c;

  /* Brushed-chrome gradient lifted from the logo mark */
  --gradient-chrome: linear-gradient(135deg, #e8eaed 0%, #b9bec7 28%, #6b7280 55%, #aeb4bd 78%, #51596500 100%); /* @kind color */
  --gradient-crimson: linear-gradient(135deg, #0a8a94 0%, #006d75 55%, #003b40 100%); /* @kind color */

  /* ============================================================
     shadcn semantic tokens — HSL triplets (consumed as hsl(var(--x)))
     LIGHT THEME
     ============================================================ */
  --background: 210 40% 98%;          /* @kind color */
  --foreground: 240 10% 10%;          /* @kind color */
  --card: 0 0% 100%;                  /* @kind color */
  --card-foreground: 240 10% 10%;     /* @kind color */
  --popover: 0 0% 100%;               /* @kind color */
  --popover-foreground: 240 10% 10%;  /* @kind color */
  --primary: 184 100% 23%;             /* @kind color */
  --primary-foreground: 0 0% 98%;     /* @kind color */
  --secondary: 240 5% 96%;            /* @kind color */
  --secondary-foreground: 240 10% 10%;/* @kind color */
  --muted: 240 5% 96%;                /* @kind color */
  --muted-foreground: 240 4% 46%;     /* @kind color */
  --accent: 184 100% 23%;              /* @kind color */
  --accent-foreground: 0 0% 98%;      /* @kind color */
  --destructive: 0 72% 51%;           /* @kind color */
  --destructive-foreground: 0 0% 98%; /* @kind color */
  --border: 240 6% 90%;               /* @kind color */
  --input: 240 6% 90%;                /* @kind color */
  --ring: 184 100% 23%;                /* @kind color */

  --sidebar-background: 0 0% 100%;    /* @kind color */
  --sidebar-border: 240 6% 90%;       /* @kind color */
  --sidebar-accent: 240 5% 96%;       /* @kind color */

  /* Status / data-viz accents (used in analytics, badges, charts) */
  --success: 152 60% 36%;   /* @kind color */
  --warning: 35 92% 50%;    /* @kind color */
  --info: 217 91% 60%;      /* @kind color */
  --chart-1: 184 95% 28%;   /* @kind color */
  --chart-2: 217 71% 52%;   /* @kind color */
  --chart-3: 152 55% 42%;   /* @kind color */
  --chart-4: 35 90% 55%;    /* @kind color */
  --chart-5: 262 52% 56%;   /* @kind color */

  /* Convenience hex aliases (non-shadcn consumers) */
  --color-primary: var(--crimson-600);
  --color-primary-hover: var(--crimson-700);
  --color-accent: var(--crimson-500);
}

/* ============================================================
   DARK THEME — applied under .dark
   ============================================================ */
.dark {
  --background: 240 10% 4%;           /* @kind color */
  --foreground: 240 5% 96%;           /* @kind color */
  --card: 240 6% 10%;                 /* @kind color */
  --card-foreground: 240 5% 96%;      /* @kind color */
  --popover: 240 6% 10%;              /* @kind color */
  --popover-foreground: 240 5% 96%;   /* @kind color */
  --primary: 184 87% 31%;             /* @kind color */
  --primary-foreground: 0 0% 98%;     /* @kind color */
  --secondary: 240 4% 16%;            /* @kind color */
  --secondary-foreground: 240 5% 96%; /* @kind color */
  --muted: 240 4% 16%;                /* @kind color */
  --muted-foreground: 240 5% 64%;     /* @kind color */
  --accent: 184 87% 31%;              /* @kind color */
  --accent-foreground: 0 0% 98%;      /* @kind color */
  --destructive: 0 63% 31%;           /* @kind color */
  --destructive-foreground: 0 0% 98%; /* @kind color */
  --border: 240 4% 24%;               /* @kind color */
  --input: 240 4% 24%;                /* @kind color */
  --ring: 184 87% 31%;                /* @kind color */

  --sidebar-background: 240 7% 7%;    /* @kind color */
  --sidebar-border: 240 4% 16%;       /* @kind color */
  --sidebar-accent: 240 4% 13%;       /* @kind color */

  --success: 152 52% 46%;             /* @kind color */
  --warning: 35 90% 56%;              /* @kind color */
  --info: 213 94% 68%;                /* @kind color */

  --color-primary: var(--crimson-500);
  --color-primary-hover: var(--crimson-400);
  --color-accent: var(--crimson-400);
}