@layer base, layout, components, utilities, pages;

@layer base {
  :root {
    /* Typography */
    --font-sans: "Noto Sans JP", "Inter", "Roboto", "Helvetica Neue", Arial, sans-serif;
    --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", serif;
    --font-mono: "Roboto Mono", "SFMono-Regular", "Menlo", monospace;

    /* Base Colors */
    --color-navy: #0f172a;
    --color-navy-dark: #0b1224;
    --color-slate-50: #f8fafc;
    --color-slate-100: #f1f5f9;
    --color-slate-200: #e2e8f0;
    --color-slate-400: #94a3b8;
    --color-slate-500: #64748b;
    --color-slate-600: #475569;
    --color-slate-700: #334155;
    --color-white: #ffffff;

    /* Semantic Text Colors */
    --color-text: var(--color-navy);
    --color-text-strong: var(--color-navy-dark);
    --color-text-subtle: rgba(15, 23, 42, 0.72);
    --color-text-muted: rgba(15, 23, 42, 0.55);

    /* Semantic Surface Colors */
    --color-bg: var(--color-white);
    --color-surface: var(--color-white);
    --color-surface-muted: var(--color-slate-50);
    --color-surface-alt: #edf2f7;

    /* Semantic Border Colors */
    --color-border: rgba(15, 23, 42, 0.12);
    --color-border-strong: rgba(15, 23, 42, 0.18);
    --color-border-light: var(--color-slate-200);

    /* Brand Colors */
    --color-primary: #0b5fff;
    --color-primary-dark: #0846cc;
    --color-primary-soft: rgba(11, 95, 255, 0.14);
    --color-accent: #67a8ff;
    --color-sub: #0f1222;
    --color-lime: #c8f14a;

    /* Expo Theme Colors */
    --expo-blue: #0060ff;
    --expo-cyan: #00d5ff;
    --expo-magenta: #ff3ba7;
    --expo-yellow: #ffd600;
    --expo-green: #10b981;

    /* Status Colors */
    --color-success: #10b981;
    --color-warning: #f97316;
    --color-error: #ef4444;

    /* Hero Colors */
    --color-hero-text: rgba(224, 242, 254, 0.98);
    --color-hero-sub: rgba(255, 255, 255, 0.68);
    --color-hero-particle: rgba(255, 255, 255, 0.58);

    /* Shadows */
    --shadow-xs: 0 4px 12px rgba(15, 23, 42, 0.08);
    --shadow-sm: 0 12px 24px rgba(15, 23, 42, 0.12);
    --shadow-md: 0 20px 40px rgba(15, 23, 42, 0.16);
    --shadow-lg: 0 28px 64px rgba(15, 23, 42, 0.2);
    --shadow-xl: 0 32px 70px rgba(15, 23, 42, 0.25);
    --shadow-hero: 0 16px 32px rgba(0, 0, 0, 0.45);
    --shadow-hero-highlight: 0 14px 28px rgba(14, 165, 233, 0.28);
    --shadow-hero-main: 0 20px 32px rgba(14, 165, 233, 0.3);
    --shadow-card-hover: 0 16px 40px rgba(0, 0, 0, 0.1);

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 24px;
    --radius-pill: 999px;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-base: 0.25s ease;
    --transition-slow: 0.35s ease;

    /* Spacing & Layout */
    --gutter: clamp(20px, 4vw, 48px);
    --content-gutter: clamp(24px, 4vw, 56px);
    --content-max: 1600px;
    --container-max: 1400px;
    --hero-max: 1800px;
    --section-spacing: clamp(64px, 10vw, 120px);

    /* Legacy / Compat */
    --surface-strengths: linear-gradient(135deg, rgba(226, 232, 240, 0.6), rgba(248, 250, 252, 0.9));
    --border-strengths: 1px solid rgba(15, 23, 42, 0.08);
    --shadow-strengths: 0 24px 40px rgba(15, 23, 42, 0.08);
    --shadow-strengths-img: 0 18px 34px rgba(15, 23, 42, 0.14);

    /* Links */
    --link-color: var(--color-accent);
    --link-hover-color: var(--color-primary);

    /* Common Backgrounds */
    --bg-muted: #f8f9fa;
    --bg-alt: #f1f3f5;

    /* Card System */
    --card-radius: 12px;
    --card-radius-sm: 8px;
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
    --card-shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);
    --card-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Accent Line */
    --accent-gradient: linear-gradient(90deg, var(--expo-blue) 0%, var(--color-navy) 100%);
    --accent-gradient-vertical: linear-gradient(180deg, var(--expo-blue) 0%, var(--color-navy) 100%);

    /* Form Elements */
    --input-radius: 6px;
    --input-border: 1px solid var(--color-slate-200);
    --input-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.1);

    /* Button System */
    --btn-radius-sm: 6px;
    --btn-radius-md: 8px;
  }

  *, *::before, *::after {
    box-sizing: border-box;
  }

  html {
    font-family: var(--font-sans);
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-text-size-adjust: 100%;
  }

  body {
    margin: 0;
    min-height: 100%;
    font-family: var(--font-sans);
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg);
  }

  a {
    color: var(--link-color);
    text-decoration: none;
    transition: color var(--transition-fast);
  }

  a:hover,
  a:focus-visible {
    color: var(--link-hover-color);
  }

  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
    height: auto;
  }

  figure,
  :where(figure) {
    margin: 0;
  }

  p {
    margin: 0 0 1.25em;
  }

  ul,
  ol {
    margin: 0 0 1.25em 1.5em;
    padding: 0;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
    color: inherit;
    border-radius: 0;
  }

  fieldset {
    border: 0;
    margin: 0;
    padding: 0;
  }

  @media print, screen and (min-width: 1100px) {
    body {
      min-width: 1024px;
    }
  }

  @media (max-width: 1024px) {
    body {
      min-width: 100%;
      overflow-x: hidden;
    }
  }
}