@import 'tailwindcss';
@import 'tailwindcss-safe-area';

@plugin "@tailwindcss/typography";
@plugin '@egoist/tailwindcss-icons';
@plugin "tailwind-scrollbar";
@plugin 'tailwindcss-animate';

@import '@pastel-palette/tailwindcss/dist/theme-oklch.css';

@source "./src/**/*.{js,jsx,ts,tsx}";
@custom-variant dark (&:where([data-theme='dark'], [data-theme='dark'] *));

[data-hand-cursor='true'] {
  --cursor-button: pointer;
  --cursor-select: text;
  --cursor-checkbox: pointer;
  --cursor-link: pointer;
  --cursor-menu: pointer;
  --cursor-radio: pointer;
  --cursor-switch: pointer;
  --cursor-card: pointer;
}

:root {
  --cursor-button: default;
  --cursor-select: text;
  --cursor-checkbox: default;
  --cursor-link: pointer;
  --cursor-menu: default;
  --cursor-radio: default;
  --cursor-switch: default;
  --cursor-card: default;

  --radius: 0.625rem;
  /* Pastel provides semantic colors (background, text, accent, border, etc).
     Keep only non-Pastel variables here. */

  /* Shadcn compatibility vars mapped to Pastel tokens */
  --background: var(--color-background);
  --foreground: var(--color-text);
  --card: var(--color-material-opaque);
  --card-foreground: var(--color-text);
  --popover: var(--color-material-medium);
  --popover-foreground: var(--color-text);
  --primary: var(--color-primary);
  --primary-foreground: var(--color-white);
  --secondary: var(--color-fill-secondary);
  --secondary-foreground: var(--color-text);
  --muted: var(--color-fill-tertiary);
  --muted-foreground: var(--color-text-tertiary);
  --accent: var(--color-accent);
  --accent-foreground: var(--color-white);
  --destructive: var(--color-red);
  --border: var(--color-border);
  --input: var(--color-border-secondary);
  --ring: var(--color-primary);

  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);

  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

:root,
body {
  @apply bg-background text-text;
  @apply font-sans;
  @apply text-base leading-normal;
  @apply antialiased;
  @apply selection:bg-accent selection:text-white;
}

/* Theme configuration */
@theme {
  /* Container */
  --container-padding: 2rem;
  --container-max-width-2xl: 1400px;

  /* Custom cursors */
  --cursor-button: var(--cursor-button);
  --cursor-select: var(--cursor-select);
  --cursor-checkbox: var(--cursor-checkbox);
  --cursor-link: var(--cursor-link);
  --cursor-menu: var(--cursor-menu);
  --cursor-radio: var(--cursor-radio);
  --cursor-switch: var(--cursor-switch);
  --cursor-card: var(--cursor-card);

  /* Blur */
  --blur-background: 70px;

  /* Box shadow */
  --box-shadow-context-menu:
    rgba(0, 0, 0, 0.067) 0px 3px 8px, rgba(0, 0, 0, 0.067) 0px 2px 5px,
    rgba(0, 0, 0, 0.067) 0px 1px 1px;

  /* Font */
  --text-large-title: 1.625rem;
  --text-large-title--line-height: 2rem;

  --text-title1: 1.375rem;
  --text-title1--line-height: 1.625rem;

  --text-title2: 1.0625rem;
  --text-title2--line-height: 1.375rem;

  --text-title3: 0.9375rem;
  --text-title3--line-height: 1.25rem;

  --text-headline: 0.8125rem;
  --text-headline--line-height: 1rem;

  --text-body: 0.8125rem;
  --text-body--line-height: 1rem;

  --text-callout: 0.75rem;
  --text-callout--line-height: 0.9375rem;

  --text-subheadline: 0.6875rem;
  --text-subheadline--line-height: 0.875rem;

  --text-footnote: 0.625rem;
  --text-footnote--line-height: 0.8125rem;

  --text-caption: 0.625rem;
  --text-caption--line-height: 0.8125rem;

  /* Font families */
  --font-sans: 'Geist Sans', ui-sans-serif, system-ui, sans-serif;
  --font-serif:
    'Noto Serif CJK SC', 'Noto Serif SC', var(--font-serif),
    'Source Han Serif SC', 'Source Han Serif', source-han-serif-sc, SongTi SC,
    SimSum, 'Hiragino Sans GB', system-ui, -apple-system, Segoe UI, Roboto,
    Helvetica, 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;
  --font-mono:
    'OperatorMonoSSmLig Nerd Font', 'Cascadia Code PL',
    'FantasqueSansMono Nerd Font', 'operator mono', JetBrainsMono,
    'Fira code Retina', 'Fira code', Consolas, Monaco, 'Hannotate SC',
    monospace, -apple-system;

  /* Custom screens */
  --screen-light-mode: (prefers-color-scheme: light);
  --screen-dark-mode: (prefers-color-scheme: dark);

  /* Width and max-width */
  --width-screen: 100vw;
  --max-width-screen: 100vw;

  /* Height and max-height */
  --height-screen: 100vh;
  --max-height-screen: 100vh;

  --color-primary: var(--color-accent);
  --color-primary-light: var(--color-accent-light);
  --color-primary-dark: var(--color-accent-dark);
}

@layer theme {
  #root {
    --color-primary: var(--color-accent);
    --color-primary-light: var(--color-accent-light);
    --color-primary-dark: var(--color-accent-dark);
  }
}

@layer base {
  .container {
    margin-left: auto;
    margin-right: auto;
    padding: var(--container-padding);
  }
  @media (min-width: 1536px) {
    .container {
      max-width: var(--container-max-width-2xl);
    }
  }
}

html {
  @apply font-sans;
}

html body {
  @apply max-w-screen overflow-x-hidden;
}

*:not(input):not(textarea):not([contenteditable='true']):focus-visible {
  outline: 0 !important;
}

@font-face {
  font-family: 'Geist Sans';
  src: url('../assets/fonts/GeistVF.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 200 300 400 500 600 700 800 900;
}

body {
  font-feature-settings:
    'rlig' 1,
    'calt' 1;
}

@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  /* Use Pastel palette tokens; provide minimal shims for existing classes */
  --color-ring: var(--color-accent);
  --color-foreground: var(--color-text);
  --color-muted-foreground: var(--color-text-secondary);
}

@layer theme {
  :root {
    @variant dark {
      --chart-1: oklch(0.488 0.243 264.376);
      --chart-2: oklch(0.696 0.17 162.48);
      --chart-3: oklch(0.769 0.188 70.08);
      --chart-4: oklch(0.627 0.265 303.9);
      --chart-5: oklch(0.645 0.246 16.439);

      --sidebar: oklch(0.205 0 0);
      --sidebar-foreground: oklch(0.985 0 0);
      --sidebar-primary: oklch(0.488 0.243 264.376);
      --sidebar-primary-foreground: oklch(0.985 0 0);
      --sidebar-accent: oklch(0.269 0 0);
      --sidebar-accent-foreground: oklch(0.985 0 0);
      --sidebar-border: oklch(1 0 0 / 10%);
      --sidebar-ring: oklch(0.556 0 0);
    }
  }
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
