import { createGlobalStyle } from 'styled-components';

/**
 * pCNT 글로벌 스타일 — 모바일 우선, CSS 변수 기반 테마 (PRD §5.1.1)
 */
export const theme = {
  colors: {
    primary: '#4f6ef7',
    primaryDark: '#3a54d0',
    bg: '#f5f6fa',
    card: '#ffffff',
    text: '#1f2430',
    textSub: '#6b7280',
    border: '#e5e7eb',
    green: '#2ecc71',
    yellow: '#f1c40f',
    orange: '#e67e22',
    red: '#e74c3c',
    danger: '#c0392b',
    success: '#27ae60',
    // MD3 Tokens (Phase A)
    md3: {
      primary: '#00685f',
      onPrimary: '#ffffff',
      primaryContainer: '#008378',
      onPrimaryContainer: '#f4fffc',
      primaryFixed: '#89f5e7',
      primaryFixedDim: '#6bd8cb',
      secondary: '#515f74',
      onSecondary: '#ffffff',
      secondaryContainer: '#d5e3fc',
      onSecondaryContainer: '#57657a',
      secondaryFixed: '#d5e3fc',
      onSecondaryFixed: '#0d1c2e',
      onSecondaryFixedVariant: '#3a485b',
      tertiary: '#924628',
      onTertiary: '#ffffff',
      tertiaryContainer: '#b05e3d',
      onTertiaryContainer: '#fffbff',
      tertiaryFixed: '#ffdbce',
      tertiaryFixedDim: '#ffb59a',
      onTertiaryFixed: '#370e00',
      onTertiaryFixedVariant: '#773215',
      error: '#ba1a1a',
      onError: '#ffffff',
      errorContainer: '#ffdad6',
      onErrorContainer: '#93000a',
      outline: '#6d7a77',
      outlineVariant: '#bcc9c6',
      surface: '#f7f9fb',
      onSurface: '#191c1e',
      surfaceVariant: '#e0e3e5',
      onSurfaceVariant: '#3d4947',
      background: '#f7f9fb',
      onBackground: '#191c1e',
      surfaceContainerLow: '#f2f4f6',
      surfaceContainerLowest: '#ffffff',
      surfaceContainerHigh: '#e6e8ea',
      surfaceContainerHighest: '#e0e3e5',
      surfaceDim: '#d8dadc',
      surfaceBright: '#f7f9fb',
      inverseSurface: '#2d3133',
      inverseOnSurface: '#eff1f3',
      inversePrimary: '#6bd8cb',
      statusNormal: '#10B981',
      statusWarning: '#DC2626',
      statusBorderline: '#F59E0B',
      glassBg: 'rgba(248, 250, 252, 0.8)',
    },
  },
  radius: {
    sm: '8px',
    md: '14px',
    lg: '20px',
    xl: '12px', // MD3 Card default (Stitch sample)
  },
  space: {
    xs: '6px',
    sm: '12px',
    md: '20px',
    lg: '32px',
  },
  font: {
    family: "'Inter', 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif",
  },
} as const;

const GlobalStyle = createGlobalStyle`
  :root {
    --pcnt-primary: ${theme.colors.primary};
    --pcnt-primary-dark: ${theme.colors.primaryDark};
    --pcnt-bg: ${theme.colors.bg};
    --pcnt-card: ${theme.colors.card};
    --pcnt-text: ${theme.colors.text};
    --pcnt-text-sub: ${theme.colors.textSub};
    --pcnt-border: ${theme.colors.border};
    --pcnt-green: ${theme.colors.green};
    --pcnt-yellow: ${theme.colors.yellow};
    --pcnt-orange: ${theme.colors.orange};
    --pcnt-red: ${theme.colors.red};

    /* MD3 Tokens (Phase A) — 기존 --pcnt-* 보존 */
    --md3-primary: ${theme.colors.md3.primary};
    --md3-on-primary: ${theme.colors.md3.onPrimary};
    --md3-primary-container: ${theme.colors.md3.primaryContainer};
    --md3-on-primary-container: ${theme.colors.md3.onPrimaryContainer};
    --md3-primary-fixed: ${theme.colors.md3.primaryFixed};
    --md3-primary-fixed-dim: ${theme.colors.md3.primaryFixedDim};
    --md3-secondary: ${theme.colors.md3.secondary};
    --md3-on-secondary: ${theme.colors.md3.onSecondary};
    --md3-secondary-container: ${theme.colors.md3.secondaryContainer};
    --md3-on-secondary-container: ${theme.colors.md3.onSecondaryContainer};
    --md3-secondary-fixed: ${theme.colors.md3.secondaryFixed};
    --md3-on-secondary-fixed: ${theme.colors.md3.onSecondaryFixed};
    --md3-on-secondary-fixed-variant: ${theme.colors.md3.onSecondaryFixedVariant};
    --md3-tertiary: ${theme.colors.md3.tertiary};
    --md3-on-tertiary: ${theme.colors.md3.onTertiary};
    --md3-tertiary-container: ${theme.colors.md3.tertiaryContainer};
    --md3-on-tertiary-container: ${theme.colors.md3.onTertiaryContainer};
    --md3-tertiary-fixed: ${theme.colors.md3.tertiaryFixed};
    --md3-tertiary-fixed-dim: ${theme.colors.md3.tertiaryFixedDim};
    --md3-on-tertiary-fixed: ${theme.colors.md3.onTertiaryFixed};
    --md3-on-tertiary-fixed-variant: ${theme.colors.md3.onTertiaryFixedVariant};
    --md3-error: ${theme.colors.md3.error};
    --md3-on-error: ${theme.colors.md3.onError};
    --md3-error-container: ${theme.colors.md3.errorContainer};
    --md3-on-error-container: ${theme.colors.md3.onErrorContainer};
    --md3-outline: ${theme.colors.md3.outline};
    --md3-outline-variant: ${theme.colors.md3.outlineVariant};
    --md3-surface: ${theme.colors.md3.surface};
    --md3-on-surface: ${theme.colors.md3.onSurface};
    --md3-surface-variant: ${theme.colors.md3.surfaceVariant};
    --md3-on-surface-variant: ${theme.colors.md3.onSurfaceVariant};
    --md3-background: ${theme.colors.md3.background};
    --md3-on-background: ${theme.colors.md3.onBackground};
    --md3-surface-container-low: ${theme.colors.md3.surfaceContainerLow};
    --md3-surface-container-lowest: ${theme.colors.md3.surfaceContainerLowest};
    --md3-surface-container-high: ${theme.colors.md3.surfaceContainerHigh};
    --md3-surface-container-highest: ${theme.colors.md3.surfaceContainerHighest};
    --md3-surface-dim: ${theme.colors.md3.surfaceDim};
    --md3-surface-bright: ${theme.colors.md3.surfaceBright};
    --md3-inverse-surface: ${theme.colors.md3.inverseSurface};
    --md3-inverse-on-surface: ${theme.colors.md3.inverseOnSurface};
    --md3-inverse-primary: ${theme.colors.md3.inversePrimary};
    --md3-status-normal: ${theme.colors.md3.statusNormal};
    --md3-status-warning: ${theme.colors.md3.statusWarning};
    --md3-status-borderline: ${theme.colors.md3.statusBorderline};
    --md3-glass-bg: ${theme.colors.md3.glassBg};
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  html, body {
    font-family: ${theme.font.family};
    background: var(--pcnt-bg);
    color: var(--pcnt-text);
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;
  }

  body {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    min-height: 100dvh;
  }

  /* Material Symbols Base Style (Phase A) */
  .material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
  }

  button {
    font-family: inherit;
    border: none;
    background: none;
    cursor: pointer;
    color: inherit;
  }

  input, select, textarea { font-family: inherit; }

  a { text-decoration: none; color: inherit; }

  /* 인지검사 가로모드: 화면 전체(좌/우) 사용, 세로 제한 해제 */
  html.test-landscape body {
    max-width: none;
    margin: 0;
  }
  html.test-landscape {
    overflow: hidden;
  }

  .btn-primary {
    display: block;
    width: 100%;
    padding: 14px;
    background: var(--pcnt-primary);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    border-radius: ${theme.radius.md};
  }
  .btn-primary:disabled {
    background: #b6c0e8;
  }
  .btn-secondary {
    display: block;
    width: 100%;
    padding: 14px;
    background: var(--pcnt-card);
    color: var(--pcnt-text);
    font-size: 16px;
    font-weight: 600;
    border: 1px solid var(--pcnt-border);
    border-radius: ${theme.radius.md};
  }
`;

export default GlobalStyle;