/* =============================================================================
   Orbita Diego — Global CSS
   main.css: reset + custom properties + base rules.
   Specific component styles live in blocks/ and patterns/.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Soft reset (abridged Josh Comeau reset, adapted)
   ----------------------------------------------------------------------------- */

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

* {
  margin: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Prevent font size inflation on mobile orientations */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* Remove list styles when list is given a non-list role */
ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

/* Improve default button reset */
button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}


/* -----------------------------------------------------------------------------
   2. Custom properties — Design System v1 tokens
   Mirrors theme.json values so they are available in vanilla CSS and custom
   blocks without parsing the JSON. Source of truth stays in theme.json.
   ----------------------------------------------------------------------------- */

:root {
  /* --- Backgrounds --- */
  --paper:        #0E0E0E;
  --paper-soft:   #1A1A1A;
  --paper-card:   #242424;

  /* --- Foregrounds --- */
  --ink:          #F4F1EA;
  --ink-mid:      #A6A29A;
  --ink-light:    #6E6A62;

  /* --- Accents --- */
  --accent:           #CFA22A;
  --accent-deep:      #B68A1F;
  --accent-warm:      #E0BB3F;
  --accent-blue:      #3A91D6;
  --accent-blue-deep: #2A6BA6;

  /* --- Semantic --- */
  --critical: #DC4444;
  --warning:  #E8A93A;
  --success:  #5EE3A1;
  --info:     #3A91D6;

  /* --- Rules / Borders --- */
  --rule:        #2E2E2E;
  --rule-strong: #404040;
  --rule-subtle: #1F1F1F;

  /* --- B2B --- */
  --b2b-badge-bg: rgba(207, 162, 42, 0.12);
  --b2b-badge-fg: #CFA22A;

  /* --- Typography: families --- */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;

  /* --- Typography: scale --- */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.5rem;
  --text-5xl:  3.5rem;

  /* --- Typography: weights --- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* --- Typography: line-heights --- */
  --leading-tight:   1.15;
  --leading-snug:    1.35;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

  /* --- Typography: letter-spacing --- */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.05em;
  --tracking-wider:  0.1em;

  /* --- Spacing: 4px-based scale --- */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* --- Border radius --- */
  --radius-none: 0;
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-sm:         0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:         0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg:         0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-glow-accent: 0 0 24px rgba(207, 162, 42, 0.18);

  /* --- Breakpoints (reference only — use in @media directly) --- */
  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1536px;

  /* --- Motion --- */
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
  --easing-default:    cubic-bezier(0.4, 0, 0.2, 1);
  --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
}


/* -----------------------------------------------------------------------------
   3. Base global rules
   ----------------------------------------------------------------------------- */

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  color: var(--ink);
  background-color: var(--paper);
}

/* Accessible focus ring — 2px dorado about all interactive elements */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Skip-to-content link (WCAG 2.1 AA) */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 9999;
  padding: var(--space-2) var(--space-4);
  background: var(--accent);
  color: var(--paper);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: top var(--duration-fast) var(--easing-default);
}

.skip-to-content:focus-visible {
  top: var(--space-4);
}

/* A-04: Footer links — override browser default blue/underline */
.site-footer a {
  color: var(--ink-mid);
  text-decoration: none;
  transition: color var(--duration-fast) var(--easing-default);
}

.site-footer a:hover {
  color: var(--ink);
}

/* Footer logo — fills the brand column. Mobile (single-stack columns) it
   spans up to ~360px to feel substantial across the full footer width.
   Desktop (4 columns) caps it at 240px to fit the brand column tastefully.
   Native dimensions 1024×410 are declared on the <img> to lock aspect ratio
   and avoid CLS during image load. */
.site-footer__logo-img {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  margin-bottom: var(--space-4);
}

@media (min-width: 1024px) {
  .site-footer__logo-img {
    max-width: 240px;
  }
}

/* Email en contacto — underline sutil para indicar clic */
.site-footer__col--contact a[href^="mailto"] {
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 3px;
}

.site-footer__col--contact a[href^="mailto"]:hover {
  color: var(--ink);
  text-decoration-color: var(--ink-mid);
}

/* Dark-themed scrollbar (Chromium) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--paper-soft);
}

::-webkit-scrollbar-thumb {
  background: var(--rule-strong);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--ink-mid);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--rule-strong) var(--paper-soft);
}


/* -----------------------------------------------------------------------------
   4. Container queries — @container setup
   Individual components declare their own container and queries.
   No component-specific queries belong here.
   ----------------------------------------------------------------------------- */

.is-container {
  container-type: inline-size;
}


/* -----------------------------------------------------------------------------
   5. Utility: visually-hidden (accessible but not visible)
   Used for sr-only labels on icon buttons (WCAG aria-label alternative).
   ----------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}