/**
 * ConcreteInfo Base Styles
 * Reset, typography, and global element defaults
 *
 * @author Amit Haridas, ConcreteInfo
 */

/* ============================================================================
   DESIGN TOKENS — ALIASES & DERIVED VALUES
   ============================================================================ */
:root {
  /* Legacy shadow aliases — mapped to design-tokens */
  --card-elevation-resting: var(--shadow-sm);
  --card-elevation-raised: var(--shadow-md);
  --card-elevation-hover: var(--shadow-lg);
  --card-elevation-floating: var(--shadow-xl);

  /* Gradient variables */
  --gradient-primary: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-light) 100%);
  --gradient-secondary: linear-gradient(135deg, var(--color-gray-700) 0%, var(--color-gray-800) 100%);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Safe area insets for notched devices */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

body {
  margin: 0;
  font-family: var(--font-family-sans, 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif);
  font-size: var(--font-size-base, 15px);
  line-height: var(--line-height-normal, 1.6);
  color: var(--text-primary, #464646);
  background-color: var(--bg-primary, #fafbfc);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Touch target enforcement — 44px minimum */
  -webkit-tap-highlight-color: transparent;
}

/* ============================================================================
   TOUCH TARGETS
   ============================================================================ */
/* Global interactive element touch targets */
button,
[role="button"],
a.btn,
label.checkbox,
label.radio,
.input,
.select,
textarea {
  min-height: 44px;
}

/* Smaller inputs can be smaller */
.input--sm,
.select--sm {
  min-height: 36px;
}

/* ============================================================================
   TYPOGRAPHY
   ============================================================================ */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--spacing-3, 0.75rem);
  font-weight: var(--font-weight-bold, 700);
  line-height: var(--line-height-tight, 1.25);
  color: var(--text-primary, #464646);
}

p {
  margin: 0 0 var(--spacing-3, 0.75rem);
}

a {
  color: var(--color-brand);
  text-decoration: none;
  transition: color var(--transition-fast, 150ms ease);
}

a:hover {
  color: var(--color-brand-dark);
}

/* ============================================================================
   ELEMENTS
   ============================================================================ */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol {
  padding-left: var(--spacing-5, 1.25rem);
}

button {
  cursor: pointer;
  font-family: inherit;
}

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

hr {
  border: none;
  border-top: 1px solid var(--border-subtle, #e3e3e3);
  margin: var(--spacing-4, 1rem) 0;
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */
:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

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

/* ============================================================================
   ANIMATIONS
   ============================================================================ */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}