/**
 * LifeOS Design System - Base Styles
 * 
 * CSS reset, typography, and foundational styles using design tokens.
 * Import this AFTER tokens.css.
 * 
 * @see tokens.css for variable definitions
 */

/* ==========================================================================
   1. CSS RESET (Modern, Minimal)
   ========================================================================== */

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

* {
  margin: 0;
  padding: 0;
}

html {
  /* Smooth scrolling for anchor links */
  scroll-behavior: smooth;
  /* Prevent text size adjustment on orientation change */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Better font rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  line-height: var(--primitive-line-height-normal);
  /* PWA safe area handling - prevents content from going under status bar/notch */
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
}

/* --------------------------------------------------------------------------
   1.1 Skip to Content Link (Accessibility)
   -------------------------------------------------------------------------- */

.skip-to-content {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  padding: var(--space-sm) var(--space-md);
  background-color: var(--accent);
  color: var(--accent-foreground);
  font-weight: var(--primitive-font-weight-semibold);
  font-size: var(--text-sm);
  text-decoration: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  transition: top var(--primitive-duration-fast) var(--primitive-ease-default);
}

.skip-to-content:focus {
  top: var(--space-md);
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

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

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

button {
  cursor: pointer;
  background: none;
  border: none;
}

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

/* Remove list styles on ul, ol with list role */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Anchor elements with no class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ==========================================================================
   2. BODY DEFAULTS
   ========================================================================== */

body {
  font-family: var(--font-family);
  font-size: var(--text-base);
  font-weight: var(--primitive-font-weight-normal);
  line-height: var(--primitive-line-height-normal);
  color: var(--text);
  background-color: var(--background);
  
  /* Smooth transitions for theme changes */
  transition: background-color var(--primitive-duration-normal) var(--primitive-ease-default),
              color var(--primitive-duration-normal) var(--primitive-ease-default);
}


/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

/* --------------------------------------------------------------------------
   3.1 Headings
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--primitive-font-weight-semibold);
  line-height: var(--primitive-line-height-tight);
  color: var(--text);
  letter-spacing: var(--primitive-tracking-tight);
}

h1 {
  font-size: var(--text-4xl);
  font-weight: var(--primitive-font-weight-bold);
  letter-spacing: var(--primitive-tracking-tighter);
}

h2 {
  font-size: var(--text-3xl);
}

h3 {
  font-size: var(--text-2xl);
}

h4 {
  font-size: var(--text-xl);
}

h5 {
  font-size: var(--text-lg);
}

h6 {
  font-size: var(--text-base);
  font-weight: var(--primitive-font-weight-medium);
}

/* --------------------------------------------------------------------------
   3.2 Paragraphs
   -------------------------------------------------------------------------- */

p {
  margin-bottom: var(--space-md);
  color: var(--text);
}

p:last-child {
  margin-bottom: 0;
}

/* Lead text - for intro paragraphs */
.lead {
  font-size: var(--text-lg);
  color: var(--text-dim);
  line-height: var(--primitive-line-height-relaxed);
}

/* Small text */
small,
.small {
  font-size: var(--text-sm);
}

/* Extra small text */
.xs {
  font-size: var(--text-xs);
}

/* --------------------------------------------------------------------------
   3.3 Links
   -------------------------------------------------------------------------- */

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--primitive-duration-fast) var(--primitive-ease-default);
}

a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   3.4 Lists
   -------------------------------------------------------------------------- */

ul,
ol {
  padding-left: var(--space-lg);
  margin-bottom: var(--space-md);
}

ul:last-child,
ol:last-child {
  margin-bottom: 0;
}

li {
  margin-bottom: var(--space-xs);
}

li:last-child {
  margin-bottom: 0;
}

/* Nested lists */
ul ul,
ul ol,
ol ul,
ol ol {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-xs);
}

/* Description lists */
dl {
  margin-bottom: var(--space-md);
}

dt {
  font-weight: var(--primitive-font-weight-semibold);
  color: var(--text);
}

dd {
  margin-left: 0;
  margin-bottom: var(--space-sm);
  color: var(--text-dim);
}

/* --------------------------------------------------------------------------
   3.5 Inline Text Elements
   -------------------------------------------------------------------------- */

strong,
b {
  font-weight: var(--primitive-font-weight-semibold);
}

em,
i {
  font-style: italic;
}

mark {
  background-color: var(--warning-muted);
  color: var(--text);
  padding: 0 var(--space-xs);
  border-radius: var(--radius-sm);
}

del,
s {
  text-decoration: line-through;
  color: var(--text-muted);
}

ins,
u {
  text-decoration: underline;
  text-decoration-color: var(--accent);
}

abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

/* --------------------------------------------------------------------------
   3.6 Code & Preformatted
   -------------------------------------------------------------------------- */

code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

code {
  background-color: var(--surface);
  color: var(--accent);
  padding: 0.125em 0.375em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-muted);
}

/* Code inside pre doesn't need extra styling */
pre code {
  background: none;
  padding: 0;
  border: none;
  border-radius: 0;
}

pre {
  background-color: var(--surface);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  overflow-x: auto;
  margin-bottom: var(--space-md);
}

kbd {
  background-color: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.125em 0.375em;
  box-shadow: inset 0 -1px 0 var(--border);
}

/* --------------------------------------------------------------------------
   3.7 Blockquotes
   -------------------------------------------------------------------------- */

blockquote {
  border-left: 4px solid var(--accent);
  padding-left: var(--space-md);
  margin: var(--space-md) 0;
  color: var(--text-dim);
  font-style: italic;
}

blockquote p:last-child {
  margin-bottom: 0;
}

blockquote cite {
  display: block;
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  font-style: normal;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   3.8 Horizontal Rules
   -------------------------------------------------------------------------- */

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-lg) 0;
}


/* ==========================================================================
   4. FORM ELEMENTS (Basic Reset)
   ========================================================================== */

input,
textarea,
select {
  background-color: var(--input);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  color: var(--text);
  transition: border-color var(--primitive-duration-fast) var(--primitive-ease-default),
              box-shadow var(--primitive-duration-fast) var(--primitive-ease-default);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--input-focus);
  box-shadow: 0 0 0 3px var(--accent-muted);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
}

/* Disabled state */
input:disabled,
textarea:disabled,
select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Labels */
label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--primitive-font-weight-medium);
  color: var(--text);
  margin-bottom: var(--space-xs);
}


/* ==========================================================================
   5. TABLES
   ========================================================================== */

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-md);
}

th,
td {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  border-bottom: 1px solid var(--border-muted);
}

th {
  font-weight: var(--primitive-font-weight-semibold);
  color: var(--text);
  background-color: var(--surface);
}

td {
  color: var(--text-dim);
}

tbody tr:hover {
  background-color: var(--surface-hover);
}


/* ==========================================================================
   6. MEDIA & EMBEDS
   ========================================================================== */

img {
  height: auto;
}

figure {
  margin: var(--space-md) 0;
}

figcaption {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--space-sm);
  text-align: center;
}

iframe {
  border: 0;
}


/* ==========================================================================
   7. SELECTION
   ========================================================================== */

::selection {
  background-color: var(--accent);
  color: var(--accent-foreground);
}


/* ==========================================================================
   8. FOCUS VISIBLE
   ========================================================================== */

/* Global focus-visible styles for accessibility */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Remove focus outline for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}


/* ==========================================================================
   9. SCROLLBAR STYLING (Optional)
   ========================================================================== */

/* WebKit browsers */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

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

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

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border) var(--surface);
}


/* ==========================================================================
   10. PRINT STYLES
   ========================================================================== */

@media print {
  body {
    background: white;
    color: black;
  }
  
  a {
    color: black;
    text-decoration: underline;
  }
  
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  
  img {
    max-width: 100% !important;
  }
  
  @page {
    margin: 2cm;
  }
}


/* ==========================================================================
   11. THEME TRANSITION OPTIMIZATION
   ========================================================================== */

/* Apply smooth transitions when theme changes, but not on initial load */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color var(--primitive-duration-normal) var(--primitive-ease-default),
              border-color var(--primitive-duration-normal) var(--primitive-ease-default),
              color var(--primitive-duration-normal) var(--primitive-ease-default) !important;
}


/* ==========================================================================
   12. SYSTEM THEME PREFERENCE FALLBACK
   ========================================================================== */

/* If no data-theme is set and user prefers light, apply light mode */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --background: var(--primitive-neutral-0);
    --background-alt: var(--primitive-neutral-50);
    --foreground: var(--primitive-neutral-900);
    
    --surface: var(--primitive-neutral-0);
    --surface-hover: var(--primitive-neutral-100);
    --surface-active: var(--primitive-neutral-200);
    
    --border: var(--primitive-neutral-200);
    --border-hover: var(--primitive-neutral-300);
    --border-muted: var(--primitive-neutral-100);
    
    --text: var(--primitive-neutral-900);
    --text-dim: var(--primitive-neutral-600);
    --text-muted: var(--primitive-neutral-400);
    
    --accent: var(--primitive-sky-500);
    --accent-foreground: var(--primitive-neutral-0);
    --accent-hover: var(--primitive-sky-600);
    --accent-muted: var(--primitive-sky-100);
    
    --shadow-card: 0 2px 8px rgb(0 0 0 / 0.06), 0 0 1px rgb(0 0 0 / 0.1);
  }
}