/* =============================================================================
   VAIO Pro BK AI PC — Design System · globals.css
   Versão: 0.1.0 (Fase 1 — Fundações)
   Three-tier tokens: Primitivos → Semânticos → Componentes
   Estratégia dark mode: .dark class (Tailwind darkMode: "class")
   ============================================================================= */

/* =============================================================================
   @layer base — RESET mínimo (complementar ao preflight do Tailwind)
   ============================================================================= */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  html {
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "ss01", "cv11";
    tab-size: 4;
  }

  body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    color: var(--text-primary);
    background-color: var(--bg-app);
    min-height: 100dvh;
  }

  :focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
  p { text-wrap: pretty; max-width: 65ch; }

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

/* =============================================================================
   TIER 1 — PRIMITIVOS (imutáveis)
   ============================================================================= */
:root {
  /* ---------- MARCA (HEX oficiais) ---------- */
  --vaio-kachi-iro: #011248;   /* Azul marinho corporativo */
  --vaio-magenta:   #C70557;   /* Accent primário — CTAs raros */
  --vaio-azure:     #0086DF;   /* Accent secundário — links/info */
  --vaio-gold:      #AE9555;   /* Detalhe de marca — MSP */

  /* ---------- BRAND SCALE (derivada em OKLCH) ---------- */
  --brand-50:  oklch(0.97 0.015 272);
  --brand-100: oklch(0.93 0.025 272);
  --brand-200: oklch(0.85 0.040 272);
  --brand-300: oklch(0.72 0.070 272);
  --brand-400: oklch(0.55 0.095 272);
  --brand-500: oklch(0.38 0.110 272);
  --brand-600: oklch(0.28 0.100 272);
  --brand-700: #011248;  /* = Kachi-Iro #011248 */
  --brand-800: oklch(0.14 0.060 272);
  --brand-900: oklch(0.09 0.040 272);

  /* ---------- NEUTROS ---------- */
  --neutral-0:   oklch(1     0     0);
  --neutral-50:  oklch(0.985 0.003 260);
  --neutral-100: oklch(0.97  0.005 260);
  --neutral-200: oklch(0.93  0.008 260);
  --neutral-300: oklch(0.87  0.010 260);
  --neutral-400: oklch(0.72  0.015 260);
  --neutral-500: oklch(0.58  0.018 260);
  --neutral-600: oklch(0.47  0.022 260);
  --neutral-700: oklch(0.35  0.025 260);
  --neutral-800: oklch(0.22  0.025 260);
  --neutral-900: oklch(0.13  0.020 260);

  /* ---------- SEMÂNTICOS DE FEEDBACK ---------- */
  --success-50:  oklch(0.97 0.040 155);
  --success-500: oklch(0.57 0.160 155);
  --success-700: oklch(0.42 0.120 155);

  --warning-50:  oklch(0.97 0.040 85);
  --warning-500: oklch(0.75 0.140 85);
  --warning-700: oklch(0.50 0.100 85);

  --danger-50:  oklch(0.96 0.030 25);
  --danger-500: oklch(0.58 0.200 25);
  --danger-700: oklch(0.42 0.160 25);

  --info-50:  oklch(0.97 0.025 243);
  --info-500: oklch(0.60 0.160 243);   /* ≈ --vaio-azure */
  --info-700: oklch(0.44 0.120 243);

  /* ---------- TIPOGRAFIA ---------- */
  --font-display: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-2xs:  0.625rem;   /* 10 */
  --fs-xs:   0.75rem;    /* 12 */
  --fs-sm:   0.875rem;   /* 14 */
  --fs-base: 1rem;       /* 16 */
  --fs-md:   1.125rem;   /* 18 */
  --fs-lg:   1.25rem;    /* 20 */
  --fs-xl:   1.5rem;     /* 24 */
  --fs-2xl:  2rem;       /* 32 */
  --fs-3xl:  2.5rem;     /* 40 */
  --fs-4xl:  3.5rem;     /* 56 */
  --fs-5xl:  4.5rem;     /* 72 */
  --fs-6xl:  6rem;       /* 96 */

  /* Fluid (clamp) */
  --fs-hero: clamp(2.5rem, 2rem + 4vw, 4.5rem);
  --fs-h2:   clamp(2rem,   1.5rem + 2.5vw, 3.5rem);
  --fs-lead: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-none:    1;
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.6;
  --lh-loose:   1.8;

  --ls-tighter: -0.03em;
  --ls-tight:   -0.02em;
  --ls-snug:    -0.01em;
  --ls-normal:   0;
  --ls-wide:     0.05em;
  --ls-wider:    0.1em;

  /* ---------- ESPAÇAMENTO (escala 4px) ---------- */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */
  --space-32: 8rem;     /* 128 */

  /* ---------- GRID / GUTTER / CONTAINER ---------- */
  --gutter:    1rem;
  --gutter-md: 1.5rem;
  --gutter-lg: 2rem;
  --gutter-xl: 2.5rem;

  --container-sm:    640px;
  --container-md:    768px;
  --container-lg:   1024px;
  --container-xl:   1200px;
  --container-2xl:  1440px;
  --container-prose: 68ch;

  /* ---------- RADIUS ---------- */
  --radius-none: 0;
  --radius-xs:   0.125rem;  /* 2 */
  --radius-sm:   0.25rem;   /* 4 */
  --radius-md:   0.5rem;    /* 8 */
  --radius-lg:   0.75rem;   /* 12 */
  --radius-xl:   1rem;      /* 16 */
  --radius-2xl:  1.5rem;    /* 24 */
  --radius-full: 9999px;

  /* ---------- SHADOWS (Kachi-Iro diluído) ---------- */
  --shadow-color: 228 60% 12%;
  --shadow-xs:   0 1px 2px 0 hsl(var(--shadow-color) / 0.06);
  --shadow-sm:   0 1px 3px 0 hsl(var(--shadow-color) / 0.08), 0 1px 2px -1px hsl(var(--shadow-color) / 0.06);
  --shadow-md:   0 4px 6px -1px hsl(var(--shadow-color) / 0.10), 0 2px 4px -2px hsl(var(--shadow-color) / 0.06);
  --shadow-lg:   0 10px 15px -3px hsl(var(--shadow-color) / 0.10), 0 4px 6px -4px hsl(var(--shadow-color) / 0.05);
  --shadow-xl:   0 20px 25px -5px hsl(var(--shadow-color) / 0.12), 0 8px 10px -6px hsl(var(--shadow-color) / 0.08);
  --shadow-2xl:  0 25px 50px -12px hsl(var(--shadow-color) / 0.22);
  --shadow-inner: inset 0 2px 4px 0 hsl(var(--shadow-color) / 0.06);

  /* ---------- Z-INDEX ---------- */
  --z-hide:     -1;
  --z-base:      0;
  --z-raised:    10;
  --z-dropdown:  1000;
  --z-sticky:    1100;
  --z-fixed:     1200;
  --z-overlay:   1300;
  --z-modal:     1400;
  --z-popover:   1500;
  --z-tooltip:   1600;
  --z-toast:     1700;
  --z-top:       9999;

  /* ---------- MOTION ---------- */
  --duration-instant: 100ms;
  --duration-fast:    150ms;
  --duration-normal:  250ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;
  --duration-slowest: 1000ms;

  --ease-linear:   linear;
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-brand:    cubic-bezier(0.22, 1, 0.36, 1);

  /* ---------- GLASS ---------- */
  --glass-bg-light:     rgba(255, 255, 255, 0.65);
  --glass-border-light: rgba(255, 255, 255, 0.35);
  --glass-bg-dark:      rgba(11, 17, 62, 0.45);
  --glass-border-dark:  rgba(255, 255, 255, 0.18);
  --glass-blur:         16px;
  --glass-saturate:     140%;

  /* ---------- ICON SIZES ---------- */
  --icon-xs:  0.75rem;   /* 12 */
  --icon-sm:  1rem;      /* 16 */
  --icon-md:  1.25rem;   /* 20 */
  --icon-lg:  1.5rem;    /* 24 */
  --icon-xl:  2rem;      /* 32 */
  --icon-2xl: 3rem;      /* 48 */
  --icon-3xl: 4rem;      /* 64 */
}

/* =============================================================================
   TIER 2 — SEMÂNTICOS (theme-aware, light default)
   ============================================================================= */
:root {
  /* Superfícies */
  --bg-app:         var(--neutral-0);
  --bg-surface:     var(--neutral-50);
  --bg-subtle:      var(--neutral-100);
  --bg-muted:       var(--neutral-200);
  --bg-brand:       var(--brand-700);
  --bg-brand-hover: var(--brand-500);

  /* Texto */
  --text-primary:    var(--brand-700);
  --text-secondary:  var(--neutral-600);
  --text-muted:      var(--neutral-500);
  --text-brand:      var(--brand-700);
  --text-on-brand:   var(--neutral-0);
  --text-disabled:   var(--neutral-400);

  /* Bordas */
  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-400);
  --border-brand:   var(--brand-700);

  /* Focus */
  --ring:                var(--vaio-azure);
  --ring-offset:         var(--bg-app);
  --focus-outline:       2px solid var(--ring);
  --focus-outline-offset: 2px;
  --shadow-focus:        0 0 0 2px var(--bg-app), 0 0 0 4px var(--ring);
}

/* =============================================================================
   DARK MODE — Só os semânticos mudam. Primitivos permanecem estáveis.
   ============================================================================= */
.dark {
  --bg-app:         var(--neutral-900);
  --bg-surface:     var(--neutral-800);
  --bg-subtle:      var(--neutral-700);
  --bg-muted:       var(--neutral-600);
  /* Kachi-Iro permanece a cor da marca em ambos modos */
  --bg-brand:       var(--brand-700);
  --bg-brand-hover: var(--brand-500);

  --text-primary:    var(--neutral-50);
  --text-secondary:  var(--neutral-300);
  --text-muted:      var(--neutral-400);
  --text-brand:      var(--brand-300);
  --text-on-brand:   var(--neutral-0);
  --text-disabled:   var(--neutral-500);

  --border-subtle:  var(--neutral-700);
  --border-default: var(--neutral-600);
  --border-strong:  var(--neutral-500);
  --border-brand:   var(--brand-400);

  /* Sombras em dark: usar tons mais escuros */
  --shadow-color: 0 0% 0%;
  --shadow-sm:   0 1px 3px 0 hsl(var(--shadow-color) / 0.40);
  --shadow-md:   0 4px 6px -1px hsl(var(--shadow-color) / 0.50);
  --shadow-lg:   0 10px 15px -3px hsl(var(--shadow-color) / 0.55);
  --shadow-xl:   0 20px 25px -5px hsl(var(--shadow-color) / 0.60);
}

/* =============================================================================
   TIER 3 — COMPONENTES (valores específicos — preenchidos na Fase 2)
   ============================================================================= */
:root {
  /* Button */
  --button-height-sm: 2rem;       /* 32 */
  --button-height-md: 2.5rem;     /* 40 */
  --button-height-lg: 3rem;       /* 48 */
  --button-radius:    var(--radius-md);

  /* Input */
  --input-height:      2.5rem;
  --input-radius:      var(--radius-sm);
  --input-padding-x:   var(--space-3);
  --input-border:      1px solid var(--border-default);

  /* Card */
  --card-padding:   var(--space-6);
  --card-radius:    var(--radius-lg);
  --card-shadow:    var(--shadow-sm);
  --card-border:    1px solid var(--border-subtle);

  /* Dialog */
  --dialog-radius:  var(--radius-xl);
  --dialog-shadow:  var(--shadow-xl);
  --dialog-padding: var(--space-8);
}

/* =============================================================================
   UTILITIES DE SEÇÃO — transição suave de cor entre seções
   ============================================================================= */
.section {
  padding-block: var(--space-16);
  padding-inline: var(--gutter);
  background-color: var(--bg-app);
  transition: background-color var(--duration-slower) var(--ease-brand),
              color            var(--duration-slower) var(--ease-brand);
}

@media (min-width: 768px) {
  .section { padding-block: var(--space-20); padding-inline: var(--gutter-md); }
}
@media (min-width: 1024px) {
  .section { padding-block: var(--space-24); padding-inline: var(--gutter-lg); }
}

.section[data-theme="brand"]   { background-color: var(--bg-brand);    color: var(--text-on-brand); }
.section[data-theme="surface"] { background-color: var(--bg-surface); }
.section[data-theme="subtle"]  { background-color: var(--bg-subtle); }
.section[data-theme="gold"]    { background-color: var(--vaio-gold);   color: var(--text-on-brand); }

/* HTML-level theme (quando ativado via useSectionTheme hook) */
html { transition: background-color var(--duration-slower) var(--ease-brand); }
html[data-theme="brand"]   { background-color: var(--bg-brand); }
html[data-theme="surface"] { background-color: var(--bg-surface); }
html[data-theme="subtle"]  { background-color: var(--bg-subtle); }

/* =============================================================================
   UTILITIES — GLASSMORPHISM
   ============================================================================= */
.glass {
  background-color: var(--glass-bg-light);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border-light);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}
.glass--dark {
  background-color: var(--glass-bg-dark);
  color: var(--text-on-brand);
  border-color: var(--glass-border-dark);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass       { background-color: rgba(255, 255, 255, 0.92); }
  .glass--dark { background-color: rgba(11, 17, 62, 0.92); }
}

/* =============================================================================
   UTILITIES — REVEAL ON SCROLL
   ============================================================================= */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =============================================================================
   KEYFRAMES
   ============================================================================= */
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp  { from { opacity: 0; transform: translateY(8px); }  to { opacity: 1; transform: translateY(0); } }
@keyframes slideDown{ from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scaleIn  { from { opacity: 0; transform: scale(0.96); }      to { opacity: 1; transform: scale(1); } }
@keyframes shimmer  { from { background-position: -200% 0; } to { background-position: 200% 0; } }
@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0 hsl(var(--shadow-color) / 0.35); }
  70%  { box-shadow: 0 0 0 12px hsl(var(--shadow-color) / 0); }
  100% { box-shadow: 0 0 0 0 hsl(var(--shadow-color) / 0); }
}

/* =============================================================================
   prefers-reduced-motion — obrigatório
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}