@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=swap');
@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";

@source "../../../apps/**/*.{ts,tsx}";
@source "../**/*.{ts,tsx}";

@custom-variant dark (&:is(.dark *));

/* ── Clay-Inspired Design Tokens ────────────────────────── */

:root {
  /* Primary */
  --clay-black: #000000;
  --pure-white: #ffffff;
  --warm-cream: #faf9f7;

  /* Swatch Palette */
  --matcha-50: #f2fcf6;
  --matcha-100: #e3f9ec;
  --matcha-300: #84e7a5;
  --matcha-400: #5ac889;
  --matcha-500: #31a96e;
  --matcha-600: #078a52;
  --matcha-700: #047a3f;
  --matcha-800: #02492a;
  --slushie-500: #3bd3fd;
  --slushie-800: #0089ad;
  --lemon-400: #f8cc65;
  --lemon-500: #fbbd41;
  --lemon-700: #d08a11;
  --lemon-800: #9d6a09;
  --ube-300: #c1b0ff;
  --ube-800: #43089f;
  --ube-900: #32037d;
  --pomegranate-400: #fc7981;
  --blueberry-800: #01418d;
  --dragonfruit-400: #e84393;

  /* Neutral Scale (Warm) */
  --warm-silver: #9f9b93;
  --warm-charcoal: #55534e;
  --dark-charcoal: #333333;

  /* Surface & Border */
  --oat-border: #dad4c8;
  --oat-light: #eee9df;
  --cool-border: #e6e8ec;
  --dark-border: #525a69;
  --light-frost: #eff1f3;

  /* Badges */
  --badge-blue-bg: #f0f8ff;
  --badge-blue-text: #3859f9;
  --focus-ring: rgb(20, 110, 245);

  /* ── Semantic Mapping ─────────────────────────────────── */

  --background: var(--warm-cream);
  --foreground: var(--clay-black);
  --card: var(--pure-white);
  --card-foreground: var(--clay-black);
  --popover: var(--pure-white);
  --popover-foreground: var(--clay-black);
  --primary: var(--matcha-600);
  --primary-foreground: var(--pure-white);
  --secondary: var(--clay-black);
  --secondary-foreground: var(--pure-white);
  --muted: var(--oat-light);
  --muted-foreground: var(--warm-silver);
  --accent: var(--slushie-500);
  --accent-foreground: var(--clay-black);
  --destructive: var(--pomegranate-400);
  --destructive-foreground: var(--pure-white);
  --success: var(--matcha-500);
  --success-foreground: var(--pure-white);
  --warning: var(--lemon-500);
  --warning-foreground: var(--clay-black);
  --info: var(--slushie-500);
  --info-foreground: var(--clay-black);
  --border: var(--oat-border);
  --input: var(--oat-border);
  --ring: var(--focus-ring);

  /* Surface tokens */
  --surface: var(--warm-cream);
  --surface-bright: var(--pure-white);
  --surface-dim: var(--oat-light);
  --surface-variant: var(--oat-light);
  --surface-container: var(--pure-white);
  --surface-container-low: var(--oat-light);
  --surface-container-lowest: var(--pure-white);
  --surface-container-high: var(--oat-border);
  --surface-container-highest: var(--warm-silver);
  --on-surface: var(--clay-black);
  --on-surface-variant: var(--warm-charcoal);
  --on-background: var(--clay-black);

  /* Container tokens */
  --primary-container: var(--blueberry-800);
  --secondary-container: var(--matcha-300);
  --tertiary-container: var(--ube-300);
  --error-container: var(--badge-blue-bg);
  --on-primary-container: var(--pure-white);
  --on-secondary-container: var(--matcha-800);
  --on-tertiary-container: var(--ube-900);
  --on-error-container: var(--badge-blue-text);

  /* Outline */
  --outline: var(--warm-charcoal);
  --outline-variant: var(--oat-border);
  --inverse-surface: var(--clay-black);
  --inverse-primary: var(--pure-white);
  --inverse-on-surface: var(--warm-cream);

  /* Fixed colors */
  --primary-fixed: var(--oat-light);
  --primary-fixed-dim: var(--oat-border);
  --secondary-fixed: var(--matcha-300);
  --secondary-fixed-dim: var(--matcha-600);
  --tertiary-fixed: var(--ube-300);
  --tertiary-fixed-dim: var(--ube-800);

  /* Chart */
  --chart-1: var(--matcha-600);
  --chart-2: var(--slushie-500);
  --chart-3: var(--lemon-500);
  --chart-4: var(--ube-800);
  --chart-5: var(--pomegranate-400);

  /* Sidebar */
  --sidebar: var(--oat-light);
  --sidebar-foreground: var(--clay-black);
  --sidebar-primary: var(--clay-black);
  --sidebar-primary-foreground: var(--pure-white);
  --sidebar-accent: var(--oat-border);
  --sidebar-accent-foreground: var(--clay-black);
  --sidebar-border: var(--oat-border);
  --sidebar-ring: var(--focus-ring);

  /* Radius: Clay scale */
  --radius: 0.75rem;
}

.dark {
  --background: #1a1917;
  --foreground: var(--pure-white);
  --card: #2a2927;
  --card-foreground: var(--pure-white);
  --popover: #2a2927;
  --popover-foreground: var(--pure-white);
  --primary: var(--matcha-300);
  --primary-foreground: var(--clay-black);
  --secondary: var(--pure-white);
  --secondary-foreground: var(--clay-black);
  --muted: #3a3937;
  --muted-foreground: var(--warm-silver);
  --border: #4a4947;
  --input: #4a4947;
  --ring: var(--slushie-500);
  --success: var(--matcha-300);
  --success-foreground: var(--clay-black);
  --warning: var(--lemon-400);
  --warning-foreground: var(--clay-black);
  --info: var(--slushie-500);
  --info-foreground: var(--pure-white);
  --surface: #1a1917;
  --surface-container: #2a2927;
  --surface-container-low: #222120;
  --surface-container-high: #3a3937;
  --on-surface: var(--pure-white);
  --on-surface-variant: var(--warm-silver);
  --primary-container: var(--slushie-800);
  --secondary-container: var(--matcha-800);
  --tertiary-container: var(--ube-900);
  --on-primary-container: var(--clay-black);
  --on-secondary-container: var(--matcha-300);
  --on-tertiary-container: var(--ube-300);
  --sidebar: #1a1917;
  --sidebar-foreground: var(--pure-white);
  --sidebar-primary: var(--slushie-500);
  --sidebar-primary-foreground: var(--clay-black);
  --sidebar-accent: #3a3937;
  --sidebar-accent-foreground: var(--pure-white);
  --sidebar-border: #4a4947;
}

@theme inline {
  --font-sans: "Inter", system-ui, sans-serif;
  --font-headline: "Inter", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;

  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
  --color-info: var(--info);
  --color-info-foreground: var(--info-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);

  /* Surface semantic tokens */
  --color-surface: var(--surface);
  --color-surface-bright: var(--surface-bright);
  --color-surface-dim: var(--surface-dim);
  --color-surface-variant: var(--surface-variant);
  --color-surface-container: var(--surface-container);
  --color-surface-container-low: var(--surface-container-low);
  --color-surface-container-lowest: var(--surface-container-lowest);
  --color-surface-container-high: var(--surface-container-high);
  --color-surface-container-highest: var(--surface-container-highest);
  --color-on-surface: var(--on-surface);
  --color-on-surface-variant: var(--on-surface-variant);
  --color-on-background: var(--on-background);

  /* On-brand text */
  --color-on-primary: var(--primary-foreground);
  --color-on-secondary: var(--secondary-foreground);
  --color-on-tertiary: var(--tertiary-foreground);
  --color-on-error: var(--destructive-foreground);

  /* M3 container tokens */
  --color-primary-container: var(--primary-container);
  --color-secondary-container: var(--secondary-container);
  --color-tertiary-container: var(--tertiary-container);
  --color-error-container: var(--error-container);
  --color-on-primary-container: var(--on-primary-container);
  --color-on-secondary-container: var(--on-secondary-container);
  --color-on-tertiary-container: var(--on-tertiary-container);
  --color-on-error-container: var(--on-error-container);

  --color-outline: var(--outline);
  --color-outline-variant: var(--outline-variant);
  --color-inverse-surface: var(--inverse-surface);
  --color-inverse-primary: var(--inverse-primary);
  --color-inverse-on-surface: var(--inverse-on-surface);

  /* Fixed colors */
  --color-primary-fixed: var(--primary-fixed);
  --color-primary-fixed-dim: var(--primary-fixed-dim);
  --color-secondary-fixed: var(--secondary-fixed);
  --color-secondary-fixed-dim: var(--secondary-fixed-dim);
  --color-tertiary-fixed: var(--tertiary-fixed);
  --color-tertiary-fixed-dim: var(--tertiary-fixed-dim);

  /* Swatch colors */
  --color-matcha-50: var(--matcha-50);
  --color-matcha-100: var(--matcha-100);
  --color-matcha-300: var(--matcha-300);
  --color-matcha-400: var(--matcha-400);
  --color-matcha-500: var(--matcha-500);
  --color-matcha-600: var(--matcha-600);
  --color-matcha-800: var(--matcha-800);
  --color-slushie-500: var(--slushie-500);
  --color-slushie-800: var(--slushie-800);
  --color-lemon-400: var(--lemon-400);
  --color-lemon-500: var(--lemon-500);
  --color-lemon-700: var(--lemon-700);
  --color-lemon-800: var(--lemon-800);
  --color-ube-300: var(--ube-300);
  --color-ube-800: var(--ube-800);
  --color-ube-900: var(--ube-900);
  --color-pomegranate-400: var(--pomegranate-400);
  --color-blueberry-800: var(--blueberry-800);
  --color-dragonfruit-400: var(--dragonfruit-400);
  --color-oat-border: var(--oat-border);
  --color-oat-light: var(--oat-light);
  --color-warm-silver: var(--warm-silver);
  --color-warm-charcoal: var(--warm-charcoal);

  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);

  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: var(--radius);
  --radius-lg: calc(var(--radius) + 4px);
  --radius-xl: calc(var(--radius) + 8px);
  --radius-2xl: calc(var(--radius) + 16px);
  --radius-3xl: calc(var(--radius) + 24px);
  --radius-4xl: calc(var(--radius) + 32px);
  --radius-pill: 1584px;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground font-sans antialiased;
  }
  html {
    @apply font-sans;
  }
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headline);
    font-weight: 600;
    letter-spacing: -0.02em;
  }
}

/* ── Utility Classes ─────────────────────────────────────── */

@layer utilities {
  .font-headline {
    font-family: var(--font-headline);
    font-weight: 600;
    letter-spacing: -0.02em;
  }
  .font-body {
    font-family: var(--font-sans);
  }
  .font-mono {
    font-family: var(--font-mono);
  }
  .glass-panel {
    background: rgba(250, 249, 247, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .ai-glow {
    background: radial-gradient(circle at 50% 50%, rgba(132, 231, 165, 0.15) 0%, transparent 70%);
  }
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  .clay-shadow {
    box-shadow: rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px;
  }
  .clay-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .clay-hover:hover {
    transform: rotateZ(-2deg) translateY(-2px);
    box-shadow: rgb(0,0,0) -4px 4px;
  }
  .uppercase-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.0675em;
  }

  [dir="rtl"] {
    text-align: right;
  }
  [dir="rtl"] .flex-row {
    flex-direction: row-reverse;
  }
  [dir="rtl"] .space-x-* {
    --space-x-reverse: 1;
  }
}