/* Declare layer order upfront - controls cascade priority */
@layer reset, tokens, base, components, utilities;

/* IBM Plex Font Import */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-tap-highlight-color: transparent;
  }

  ::selection {
    background: var(--blue-20);
    color: var(--gray-10);
  }

  :root[data-theme="dark"] ::selection {
    background: var(--blue-60);
    color: var(--gray-100);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) ::selection {
      background: var(--blue-60);
      color: var(--gray-100);
    }
  }
}

@layer tokens {
  :root {
    /*
     * Color Palette - IBM Carbon + Apple Fusion
     * Cool grays with vibrant blue accent
     */

    /* Gray scale (Carbon-inspired cool grays) */
    --gray-100: #f4f4f4;
    --gray-90: #e0e0e0;
    --gray-80: #c6c6c6;
    --gray-70: #a8a8a8;
    --gray-60: #8d8d8d;
    --gray-50: #6f6f6f;
    --gray-40: #525252;
    --gray-30: #393939;
    --gray-20: #262626;
    --gray-10: #161616;

    /* Blue scale (Carbon blue) */
    --blue-90: #001d6c;
    --blue-80: #002d9c;
    --blue-70: #0043ce;
    --blue-60: #0f62fe;
    --blue-50: #4589ff;
    --blue-40: #78a9ff;
    --blue-30: #a6c8ff;
    --blue-20: #d0e2ff;

    /* Red scale */
    --red-90: #520408;
    --red-80: #750e13;
    --red-70: #a2191f;
    --red-60: #da1e28;
    --red-50: #fa4d56;
    --red-40: #ff8389;
    --red-30: #ffb3b8;

    /* Green scale */
    --green-90: #022d0d;
    --green-80: #044317;
    --green-70: #0e6027;
    --green-60: #198038;
    --green-50: #24a148;
    --green-40: #42be65;
    --green-30: #6fdc8c;

    /* Yellow scale */
    --yellow-90: #302400;
    --yellow-80: #483700;
    --yellow-70: #684e00;
    --yellow-60: #8e6a00;
    --yellow-50: #b28600;
    --yellow-40: #d2a106;
    --yellow-30: #f1c21b;
    --yellow-20: #fddc69;

    /* Purple scale */
    --purple-90: #1c0f30;
    --purple-80: #31135e;
    --purple-70: #491d8b;
    --purple-60: #8a3ffc;
    --purple-50: #a56eff;
    --purple-40: #be95ff;
    --purple-30: #d4bbff;

    /* Cyan scale */
    --cyan-90: #012749;
    --cyan-80: #003a6d;
    --cyan-70: #00539a;
    --cyan-60: #0072c3;
    --cyan-50: #1192e8;
    --cyan-40: #33b1ff;
    --cyan-30: #82cfff;

    /* Timing (Apple-inspired spring curves) */
    --timing-fast: 0.15s cubic-bezier(0.2, 0.9, 0.3, 1);
    --timing-normal: 0.25s cubic-bezier(0.2, 0.9, 0.3, 1);
    --timing-slow: 0.4s cubic-bezier(0.2, 0.9, 0.3, 1);

    /* Carbon spacing scale (rem-based) */
    --space-1: 0.125rem;  /* 2px */
    --space-2: 0.25rem;   /* 4px */
    --space-3: 0.5rem;    /* 8px */
    --space-4: 0.75rem;   /* 12px */
    --space-5: 1rem;      /* 16px */
    --space-6: 1.5rem;    /* 24px */
    --space-7: 2rem;      /* 32px */
    --space-8: 2.5rem;    /* 40px */
    --space-9: 3rem;      /* 48px */

    /* Border radius (subtle, Apple-like) */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* DPI-aware hairline */
    --single-pixel: 1px;

    /* Z-index scale */
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 300;
    --z-popover: 400;
    --z-tooltip: 500;

    /* Typography scale (Carbon) */
    --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', 'SF Mono', Consolas, monospace;

    --text-xs: 0.75rem;     /* 12px */
    --text-sm: 0.875rem;    /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-lg: 1.125rem;    /* 18px */
    --text-xl: 1.25rem;     /* 20px */
    --text-2xl: 1.5rem;     /* 24px */
    --text-3xl: 1.75rem;    /* 28px */
    --text-4xl: 2rem;       /* 32px */

    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

    --tracking-tight: -0.01em;
    --tracking-normal: 0;
    --tracking-wide: 0.02em;
  }

  @media (resolution >= 2dppx) {
    :root {
      --single-pixel: 0.5px;
    }
  }

  @media (resolution >= 3dppx) {
    :root {
      --single-pixel: 0.333px;
    }
  }
}

@layer base {
  :root {
    /* Semantic tokens - Light theme (default) */
    --surface-primary: #ffffff;
    --surface-secondary: var(--gray-100);
    --surface-elevated: #ffffff;
    --surface-overlay: rgba(0, 0, 0, 0.5);

    --text-primary: var(--gray-10);
    --text-secondary: var(--gray-50);
    --text-muted: var(--gray-60);
    --text-on-color: #ffffff;

    --border-default: var(--gray-80);
    --border-subtle: var(--gray-90);
    --border-strong: var(--gray-50);

    --focus-ring: var(--blue-60);
    --accent-primary: var(--blue-60);
    --accent-primary-hover: var(--blue-70);

    /* Interactive colors */
    --interactive-primary: var(--blue-60);
    --interactive-primary-hover: var(--blue-70);
    --interactive-secondary: var(--gray-100);
    --interactive-secondary-hover: var(--gray-90);

    /* Status colors */
    --status-error: var(--red-60);
    --status-success: var(--green-60);
    --status-warning: var(--yellow-30);
    --status-info: var(--blue-60);

    /* Component tokens - Light */
    --button-primary-bg: var(--blue-60);
    --button-primary-bg-hover: var(--blue-70);
    --button-primary-text: #ffffff;

    --button-secondary-bg: var(--gray-100);
    --button-secondary-bg-hover: var(--gray-90);
    --button-secondary-text: var(--gray-10);

    --button-ghost-text: var(--blue-60);
    --button-ghost-hover: var(--blue-20);

    --input-bg: var(--gray-100);
    --input-bg-focus: #ffffff;
    --input-border: var(--gray-80);
    --input-border-focus: var(--blue-60);
    --input-text: var(--gray-10);
    --input-placeholder: var(--gray-60);

    --field-label: var(--gray-40);
  }

  /* Dark theme */
  :root[data-theme="dark"] {
    --surface-primary: var(--gray-10);
    --surface-secondary: var(--gray-20);
    --surface-elevated: var(--gray-20);
    --surface-overlay: rgba(0, 0, 0, 0.65);

    --text-primary: var(--gray-100);
    --text-secondary: var(--gray-70);
    --text-muted: var(--gray-60);

    --border-default: var(--gray-30);
    --border-subtle: var(--gray-20);
    --border-strong: var(--gray-50);

    --accent-primary: var(--blue-50);
    --accent-primary-hover: var(--blue-40);

    --interactive-primary: var(--blue-50);
    --interactive-primary-hover: var(--blue-40);
    --interactive-secondary: var(--gray-30);
    --interactive-secondary-hover: var(--gray-40);

    --button-primary-bg: var(--blue-50);
    --button-primary-bg-hover: var(--blue-40);
    --button-primary-text: var(--gray-10);

    --button-secondary-bg: var(--gray-30);
    --button-secondary-bg-hover: var(--gray-40);
    --button-secondary-text: var(--gray-100);

    --button-ghost-text: var(--blue-50);
    --button-ghost-hover: rgba(69, 137, 255, 0.15);

    --input-bg: var(--gray-20);
    --input-bg-focus: var(--gray-20);
    --input-border: var(--gray-30);
    --input-border-focus: var(--blue-50);
    --input-text: var(--gray-100);
    --input-placeholder: var(--gray-60);

    --field-label: var(--gray-70);
  }

  /* System preference dark mode */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --surface-primary: var(--gray-10);
      --surface-secondary: var(--gray-20);
      --surface-elevated: var(--gray-20);
      --surface-overlay: rgba(0, 0, 0, 0.65);

      --text-primary: var(--gray-100);
      --text-secondary: var(--gray-70);
      --text-muted: var(--gray-60);

      --border-default: var(--gray-30);
      --border-subtle: var(--gray-20);
      --border-strong: var(--gray-50);

      --accent-primary: var(--blue-50);
      --accent-primary-hover: var(--blue-40);

      --interactive-primary: var(--blue-50);
      --interactive-primary-hover: var(--blue-40);
      --interactive-secondary: var(--gray-30);
      --interactive-secondary-hover: var(--gray-40);

      --button-primary-bg: var(--blue-50);
      --button-primary-bg-hover: var(--blue-40);
      --button-primary-text: var(--gray-10);

      --button-secondary-bg: var(--gray-30);
      --button-secondary-bg-hover: var(--gray-40);
      --button-secondary-text: var(--gray-100);

      --button-ghost-text: var(--blue-50);
      --button-ghost-hover: rgba(69, 137, 255, 0.15);

      --input-bg: var(--gray-20);
      --input-bg-focus: var(--gray-20);
      --input-border: var(--gray-30);
      --input-border-focus: var(--blue-50);
      --input-text: var(--gray-100);
      --input-placeholder: var(--gray-60);

      --field-label: var(--gray-70);
    }
  }

  body {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-normal);
    color: var(--text-primary);
    background-color: var(--surface-primary);
  }

  /* Headings */
  h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
  }

  /* Monospace */
  code, pre, kbd {
    font-family: var(--font-mono);
  }
}