@import 'tailwindcss';

@theme {
  /*=============================================================*/
  /* TAILWIND V4 DESIGN SYSTEM - MY DOGANA                     */
  /*=============================================================*/

  /*-------------------------------------------------------------*/
  /* NEUTRAL COLOR PALETTE                                      */
  /*-------------------------------------------------------------*/
  --color-neutral-100: #f2f2f7;
  --color-neutral-200: #e5e5ea;
  --color-neutral-300: #d1d1d6;
  --color-neutral-400: #c7c7cc;
  --color-neutral-500: #aeaeb2;
  --color-neutral-600: #8e8e93;
  --color-neutral-700: #7c7c80;
  --color-neutral-800: #545456;
  --color-neutral-900: #444446;
  --color-neutral-950: #363638;

  /*-------------------------------------------------------------*/
  /* BACKGROUND COLORS                                          */
  /*-------------------------------------------------------------*/
  --color-background-light-100: #ffffff;
  --color-background-light-200: #f9f9fa;
  --color-background-light-300: #f5f5f5;
  --color-background-dark-200: #312c2a;
  --color-background-dark-300: #1b1918;

  /*-------------------------------------------------------------*/
  /* PRIMARY BLUE COLORS - MY DOGANA BRAND                     */
  /*-------------------------------------------------------------*/
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-200: #bfdbfe;
  --color-blue-300: #93c5fd;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #1d4ed8;
  --color-blue-700: #1e40af;
  --color-blue-800: #1e3a8a;
  --color-blue-900: #1e3a8a;

  /* Blue variants with opacity */
  --color-blue-500-10: color-mix(
    in srgb,
    var(--color-blue-500) 10%,
    transparent
  );
  --color-blue-500-20: color-mix(
    in srgb,
    var(--color-blue-500) 20%,
    transparent
  );
  --color-blue-500-30: color-mix(
    in srgb,
    var(--color-blue-500) 30%,
    transparent
  );
  --color-blue-500-50: color-mix(
    in srgb,
    var(--color-blue-500) 50%,
    transparent
  );
  --color-blue-500-70: color-mix(
    in srgb,
    var(--color-blue-500) 70%,
    transparent
  );
  --color-blue-500-80: color-mix(
    in srgb,
    var(--color-blue-500) 80%,
    transparent
  );
  --color-blue-500-90: color-mix(
    in srgb,
    var(--color-blue-500) 90%,
    transparent
  );

  /*-------------------------------------------------------------*/
  /* SEMANTIC COLOR PALETTES                                   */
  /*-------------------------------------------------------------*/

  /* Orange */
  --color-orange-50: #fff7ed;
  --color-orange-100: #ffedd5;
  --color-orange-200: #fed7aa;
  --color-orange-300: #fdba74;
  --color-orange-400: #fb923c;
  --color-orange-500: #f97316;
  --color-orange-600: #ea580c;
  --color-orange-700: #c2410c;
  --color-orange-800: #9a3412;
  --color-orange-900: #431407;

  /* Red */
  --color-red-50: #fef2f2;
  --color-red-100: #fecaca;
  --color-red-200: #fca5a5;
  --color-red-300: #f87171;
  --color-red-400: #ef4444;
  --color-red-500: #dc2626;
  --color-red-600: #b91c1c;
  --color-red-700: #991b1b;
  --color-red-800: #7f1d1d;
  --color-red-900: #450a0a;

  /* Green */
  --color-green-50: #f2fcf2;
  --color-green-100: #dbf8db;
  --color-green-200: #c3f3c3;
  --color-green-300: #aaf3a9;
  --color-green-400: #8ddf8d;
  --color-green-500: #70c470;
  --color-green-600: #58a558;
  --color-green-700: #3f863f;
  --color-green-800: #2e6a2e;
  --color-green-900: #1c4d1c;

  /* Violet */
  --color-violet-50: #f5f3fe;
  --color-violet-100: #e6e1fd;
  --color-violet-200: #d5cdfc;
  --color-violet-300: #c5bbfb;
  --color-violet-400: #b2a5fc;
  --color-violet-500: #9687e2;
  --color-violet-600: #7969c7;
  --color-violet-700: #5d4da8;
  --color-violet-800: #463989;
  --color-violet-900: #2d2266;

  /*-------------------------------------------------------------*/
  /* TYPOGRAPHY SYSTEM                                         */
  /*-------------------------------------------------------------*/
  --font-family-sans: 'Work Sans', sans-serif;

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Font Sizes */
  --font-size-xs: 0.5rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.8rem;
  --font-size-5xl: 3.56rem;

  /*-------------------------------------------------------------*/
  /* SPACING & LAYOUT                                          */
  /*-------------------------------------------------------------*/
  --radius-4xl: 2rem;
}