@import "tailwindcss";

@theme {
  /* Typography — CashJoy Editorial & Utility */
  --font-headline: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-body: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif;
  --font-label: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;

  /* Border Radii — Friendly Geometry */
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 2rem;
  --radius-xl: 3rem;
  --radius-full: 9999px;

  /* Color Palette - Light (Default) */
  --color-surface: var(--ds-surface, #fff8f6);
  --color-surface-container-highest: var(--ds-surface-container-highest, #f9dcd5);
  --color-surface-container-high: var(--ds-surface-container-high, #ffe2da);
  --color-surface-container: var(--ds-surface-container, #ffe9e3);
  --color-surface-container-low: var(--ds-surface-container-low, #fff1ed);
  --color-surface-container-lowest: var(--ds-surface-container-lowest, #ffffff);
  
  --color-inverse-surface: var(--ds-inverse-surface, #3d2c27);
  --color-inverse-on-surface: var(--ds-inverse-on-surface, #ffede8);

  --color-primary: var(--ds-primary, #bb0054);
  --color-on-primary: var(--ds-on-primary, #ffffff);
  --color-primary-container: var(--ds-primary-container, #ffd9df);
  --color-on-primary-container: var(--ds-on-primary-container, #8f003f);
  
  --color-secondary: var(--ds-secondary, #006875);
  --color-on-secondary: var(--ds-on-secondary, #ffffff);
  --color-secondary-container: var(--ds-secondary-container, #9cf0ff);
  --color-on-secondary-container: var(--ds-on-secondary-container, #004f58);

  --color-tertiary: var(--ds-tertiary, #705d00);
  --color-on-tertiary: var(--ds-on-tertiary, #ffffff);
  --color-tertiary-container: var(--ds-tertiary-container, #ffe170);
  --color-on-tertiary-container: var(--ds-on-tertiary-container, #544600);

  --color-background: var(--ds-background, #fff8f6);
  --color-on-background: var(--ds-on-background, #271813);
  
  --color-surface-tint: var(--ds-surface-tint, #bb0054);
  --color-on-surface: var(--ds-on-surface, #271813);
  --color-on-surface-variant: var(--ds-on-surface-variant, #5d4037);

  --color-outline: var(--ds-outline, #926f65);
  --color-outline-variant: var(--ds-outline-variant, #e7bdb1);
  
  --color-error: var(--ds-error, #ba1a1a);
  --color-on-error: var(--ds-on-error, #ffffff);
  --color-error-container: var(--ds-error-container, #ffdad6);
  --color-on-error-container: var(--ds-on-error-container, #93000a);
}

/* Enable class-based dark mode */
@custom-variant dark (&:where(.dark, .dark *));

/* Base Application Styles */
@layer base {
  body {
    @apply antialiased text-on-surface bg-surface font-body;
    font-size: 15px;
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  /* Font Utilities for explicitly using the defined families */
  .font-headline, .headline-font {
    font-family: var(--font-headline);
  }
  .font-body {
    font-family: var(--font-body);
  }
  .font-label {
    font-family: var(--font-label);
  }

  .tabular-nums {
    font-variant-numeric: tabular-nums;
  }

  /* Dark Theme Variable Overrides */
  .dark {
    /* Main surfaces become deep chocolate tones rather than pure black */
    --ds-surface: #271813;
    --ds-background: #271813;
    
    /* Surface Containers for Depth mapping inverted or darker */
    --ds-surface-container-lowest: #1a0f0b;
    --ds-surface-container-low: #33211a;
    --ds-surface-container: #3d2d27;
    --ds-surface-container-high: #4a3832;
    --ds-surface-container-highest: #57443d;

    /* Inverse (For toasts etc.) */
    --ds-inverse-surface: #fff8f6;
    --ds-inverse-on-surface: #3d2c27;

    /* Primary adjustments for legibility on dark background */
    --ds-primary: #ffb1c1;
    --ds-on-primary: #3f0018;
    --ds-primary-container: #8f003f;
    --ds-on-primary-container: #ffd9df;

    /* Secondary adjustments */
    --ds-secondary: #00daf3;
    --ds-on-secondary: #001f24;
    --ds-secondary-container: #004f58;
    --ds-on-secondary-container: #9cf0ff;

    /* Tertiary adjustments */
    --ds-tertiary: #e9c400;
    --ds-on-tertiary: #221b00;
    --ds-tertiary-container: #544600;
    --ds-on-tertiary-container: #ffe170;

    /* Text definitions for contrast */
    --ds-on-surface: #ffede8;
    --ds-on-surface-variant: #dcc1b9;
    --ds-on-background: #ffede8;

    /* Outline adjusted for dark mode */
    --ds-outline: #a7887e;
    --ds-outline-variant: #5d4037;
    
    /* Error states optimized for dark mode */
    --ds-error: #ffb4ab;
    --ds-on-error: #690005;
    --ds-error-container: #93000a;
    --ds-on-error-container: #ffdad6;
  }
}