/* style.css (Apple-ish simplification)
   Goal: fewer tokens, more consistency, calm hierarchy.
   Works with Shadow DOM via CSS Custom Properties.
*/

:root {
  /* Typography */
  --font-family: 'Sora', 'Poppins', 'Segoe UI', sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Font scale (harmonic) */
  --font-base-step-mobile: clamp(0.9rem, 3.0vw, 1.8rem);
  --font-base-step-desktop: clamp(1.0rem, 1.2vw, 1.0rem);
  --font-base-step: var(--font-base-step-mobile);
  --font-scale-step: 1.25;         /* harmonische mobile scale */
  --font-base: var(--font-base-step);
  --font-scale: var(--font-scale-step);

  /* Calculated sizes */
  --font-p: var(--font-base);
  --font-h3: calc(var(--font-base) * var(--font-scale));
  --font-h2: calc(var(--font-h3) * var(--font-scale));
  --font-h1: calc(var(--font-h2) * var(--font-scale));

  /* Heading scale */
  --heading-h1-size: var(--font-h1);
  --heading-h1-line: 1.1;
  --heading-h1-letter: -0.02em;
  --heading-h2-size: var(--font-h2);
  --heading-h2-line: 1.15;
  --heading-h2-letter: -0.015em;
  --heading-h3-size: var(--font-h3);
  --heading-h3-line: 1.2;
  --heading-h3-letter: -0.01em;
  --heading-h4-size: calc(var(--font-base) * 1.125);
  --heading-h4-line: 1.25;
  --heading-h4-letter: -0.005em;

  /* Body scale */
  --body-xl-size: calc(var(--font-p) * 1.2);
  --body-xl-line: 1.65;
  --body-xl-weight: 400;
  --body-lg-size: calc(var(--font-p) * 1.1);
  --body-lg-line: 1.6;
  --body-lg-weight: 400;
  --body-title-size: calc(var(--font-p) * 1.05);
  --body-title-line: 1.52;
  --body-title-weight: 600;
  --body-base-size: var(--font-p);
  --body-base-line: 1.55;
  --body-base-weight: 400;
  --body-sm-size: calc(var(--font-p) * 0.9);
  --body-sm-line: 1.45;
  --body-sm-weight: 400;
  --body-caption-size: calc(var(--font-p) * 0.8);
  --body-caption-line: 1.35;
  --body-caption-weight: 500;

  /* Letter spacing */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-snug: -0.01em;
  --letter-spacing-normal: 0em;
  --letter-spacing-relaxed: 0.04em;
  --letter-spacing-wide: 0.08em;

  /* Text */
  --text-strong: #f7f8ff;
  --text-medium: rgba(247,248,255,0.78);
  --text-muted: rgba(247,248,255,0.55);
  --text-disabled: rgba(247,248,255,0.32);
  --text-inverted: #05060a;
  --text-accent: #ff4656;
  --text-primary: var(--text-strong);
  --text-secondary: var(--text-medium);
  --text-tertiary: var(--text-muted);

  /* Backgrounds */
  --bg-page: radial-gradient(circle at top, #1f1f1f 0%, #080808 65%);
  --bg-app: #05060a;
  --bg-elevated: #0b0f1c;
  --bg-accent: #141a2c;
  --bg-gradient: linear-gradient(135deg, #03040a 0%, #0a0f1c 48%, #03040a 100%);
  --bg-surface: var(--bg-elevated);
  --bg-surface-strong: var(--bg-app);
  --bg-overlay: rgba(0,0,0,0.35);

  /* Containers */
  --container-card: rgba(9,12,20,0.92);
  --container-accent: linear-gradient(135deg, rgba(255,70,86,0.16), rgba(255,255,255,0.06));
  --container-border: rgba(255,255,255,0.08);
  --container-outline-strong: rgba(255,70,86,0.45);
  --container-padding: 32px;
  --container-gap: 24px;

  /* Status palette */
  --status-success: #19d67b;
  --status-warning: #f7c948;
  --status-danger: #ff4656;
  --status-info: #4f9cff;
  --status-neutral: #7f88a8;
  --status-highlight: #ff7b39;

  /* Arrow colors */
  --arrow-color-finished: #2de27a;
  --arrow-color-upcoming: #3bb4ff;
  --arrow-color-danger: #ff4656;

  /* Borders */
  --border: rgba(255,255,255,0.10);
  --border-subtle: rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.18);
  --card-border: var(--container-border);

  /* Radius */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);

  /* Shadows */
  --shadow-soft: 0 12px 30px rgba(2,4,12,0.55);
  --shadow-medium: 0 22px 55px rgba(0,0,0,0.55);
  --shadow-hard: 0 35px 80px rgba(0,0,0,0.65);
  --shadow-glow: 0 0 22px rgba(255,70,86,0.55);
  --shadow-sm: var(--shadow-soft);
  --shadow-md: var(--shadow-medium);
  --shadow-lg: var(--shadow-hard);

  /* Blur glass */
  --glass-blur: 22px;
  --glass-saturation: 140%;
  --glass-overlay: linear-gradient(155deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02));
  --glass-border: 1px solid rgba(255,255,255,0.18);
  --glass-shadow: 0 25px 60px rgba(2,6,20,0.65);

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 18px;
  --spacing-xl: 24px;
  --spacing-xxl: 32px;
  --spacing-stack: 12px;
  --spacing-section: 42px;
  --spacing-header: 48px;
  --spacing-layout-gutter: 18px;
  --space-1: var(--spacing-xs);
  --space-2: var(--spacing-sm);
  --space-3: var(--spacing-md);
  --space-4: 16px;
  --space-5: var(--spacing-xl);
  --space-6: var(--spacing-xxl);
  --space-7: 40px;
  --space-8: 48px;

  /* Layout */
  --container-width: 90vw;
  --container-max-width: 700px;
  --card-max-width: 440px;
  --card-width: min(var(--card-max-width), 100%);
  --section-gap: 42px;
  --header-gap: var(--spacing-stack);
  --layout-gutter: var(--spacing-layout-gutter);
  --section-card-width: min(100%, 420px);
  --section-grid-gap: 32px;

  /* Motion */
  --motion-duration-instant: 90ms;
  --motion-duration-fast: 160ms;
  --motion-duration-base: 230ms;
  --motion-duration-expressive: 420ms;
  --motion-easing-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-easing-emphasized: cubic-bezier(0.34, 1.56, 0.64, 1);
  --motion-easing-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-stagger-sm: 40ms;
  --motion-stagger-md: 80ms;
  --motion-stagger-lg: 120ms;
  --ease: var(--motion-easing-standard);
  --dur-fast: var(--motion-duration-fast);
  --dur: var(--motion-duration-base);

  /* Buttons */
  --btn-primary-bg: linear-gradient(120deg, #ff4656 0%, #ff7b39 100%);
  --btn-primary-color: #05060a;
  --btn-primary-hover: linear-gradient(120deg, #ff5f6f 0%, #ff944d 100%);
  --btn-primary-active: #d83a4a;
  --btn-primary-disabled: rgba(255,70,86,0.35);
  --btn-primary-border: none;
  --btn-primary-transform: uppercase;
  --btn-secondary-bg: rgba(244,247,255,0.08);
  --btn-secondary-color: #f4f7ff;
  --btn-secondary-hover: rgba(244,247,255,0.18);
  --btn-secondary-active: rgba(244,247,255,0.28);
  --btn-secondary-disabled: rgba(244,247,255,0.12);
  --btn-secondary-border: 1px solid rgba(244,247,255,0.24);

  /* Bottom nav */
  --bottom-nav-bg: rgba(3,5,12,0.92);
  --bottom-nav-blur: 18px;
  --bottom-nav-border: 1px solid rgba(255,255,255,0.12);
  --bottom-nav-inactive-color: rgba(244,247,255,0.55);
  --bottom-nav-inactive-icon: rgba(244,247,255,0.4);
  --bottom-nav-active-color: #ffffff;
  --bottom-nav-active-icon: #ff4656;
  --bottom-nav-indicator: linear-gradient(90deg, #ff4656 0%, #ff7b39 100%);
  --bottom-nav-glow: 0 0 18px rgba(255,70,86,0.55);

  /* Cards & component semantics */
  --card-surface: var(--container-card);
  --card-font: var(--font-family-base);
  --card-text: var(--text-strong);
  --card-bg: var(--card-surface);
  --card-radius: var(--radius-card);
  --card-border-rule: 1px solid var(--card-border);
  --card-shadow: var(--shadow-medium);
  --card-padding: var(--container-padding);
  --card-gap: var(--container-gap);
  --accent: rgba(255,255,255,0.10);
  --accent-strong: rgba(255,255,255,0.16);

  /* Neutral team gradient fallback */
  --neutral-team-gradient: linear-gradient(135deg, #1c1c1c, #434343);

  /* Pills */
  --pill-radius: var(--radius-pill);
  --pill-bg: rgba(255,255,255,0.08);
  --pill-border: 1px solid rgba(255,255,255,0.30);
  --pill-text: var(--text-secondary);
  --pill-size: 0.72rem;
  --pill-tracking: 0.20em;
  --pill-transform: uppercase;

  /* Buttons (soft overrides for legacy components) */
  --btn-bg: rgba(255,255,255,0.08);
  --btn-bg-hover: rgba(255,255,255,0.14);
  --btn-border: 1px solid var(--border-strong);
  --btn-text: var(--text-primary);
  --btn-radius: var(--radius-md);

  /* Inputs */
  --input-bg: rgba(255,255,255,0.05);
  --input-border: 1px solid var(--border-subtle);
  --input-radius: var(--radius-md);
  --input-text: var(--text-primary);
  --input-placeholder: var(--text-tertiary);

  /* Input focus (used by input-like controls and selection highlights) */
  --input-focus-border: rgba(0,198,255,0.8);
  --input-focus-shadow: rgba(0,198,255,0.25);

  /* Hover / focus */
  --hover-bg: rgba(255,255,255,0.08);
  --focus-ring: 2px solid rgba(255,255,255,0.30);

  /* Component defaults mirrored from src/json */
  --header-tab-columns: 4;
  --header-color-1: #ce1126f2;
  --header-color-2: #800000e6;
  --header-color-3: #000000eb;
  --header-color-4: #009e49f2;
  --header-color-5: #00803cf2;
  --altprofilheader-height: 35vh;
  /* Global orange accent (buttons, switches, tabs, etc.)
     Change these RGB values to steer all orange UI accents app-wide. */
  --accent-orange-start-rgb: 255, 147, 0;
  --accent-orange-end-rgb: 255, 96, 0;
  --accent-orange-shadow-rgb: var(--accent-orange-end-rgb);
  --accent-orange-text: #050505;
  --accent-orange-gradient: linear-gradient(120deg, rgb(var(--accent-orange-start-rgb)), rgb(var(--accent-orange-end-rgb)));
  --accent-orange-gradient-90: linear-gradient(120deg, rgba(var(--accent-orange-start-rgb), 0.9), rgba(var(--accent-orange-end-rgb), 0.9));
  --accent-orange-shadow-25: rgba(var(--accent-orange-shadow-rgb), 0.25);
  --accent-orange-shadow-28: rgba(var(--accent-orange-shadow-rgb), 0.28);
  --accent-orange-shadow-32: rgba(var(--accent-orange-shadow-rgb), 0.32);
  --accent-orange-shadow-35: rgba(var(--accent-orange-shadow-rgb), 0.35);
  --accent-orange-shadow-36: rgba(var(--accent-orange-shadow-rgb), 0.36);
  --accent-orange-shadow-42: rgba(var(--accent-orange-shadow-rgb), 0.42);
  --accent-orange-shadow-45: rgba(var(--accent-orange-shadow-rgb), 0.45);

  /* Component integration defaults */
  --switch-accent: var(--accent-orange-gradient-90);
  --switch-accent-text: var(--accent-orange-text);

  /* Footers follow container width by default */
  --app-footer-width: var(--container-width, 90vw);
  --app-footer-max-width: var(--container-max-width, 700px);
  --menu-footer-width: var(--container-width, 90vw);
  --menu-footer-max-width: var(--container-max-width, 700px);

  /* Legacy/compat aliases used by existing components */
  --top-farbe: rgb(var(--accent-orange-start-rgb));
  --bottom-farbe: rgb(var(--accent-orange-end-rgb));
  --blend-farbe: #af4300ff;
  --hero-color-start: #ce1126;
  --hero-color-mid: #040404;
  --hero-color-end: #00803c;
}

/* Base page (optional) */
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-family);
}

*, *::before, *::after {
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 450px) {
  :root {
    --font-base-step-mobile: clamp(0.9rem, 3.0vw, 1.8rem);
  }
}

@media (max-width: 550px) {
  :root {
    --font-base-step-mobile: clamp(0.9rem, 3.35vw, 1.8rem);
  }
}

@media (max-width: 699px) {
  :root {
    --font-base-step-mobile: clamp(0.9rem, 3.7vw, 1.8rem);
  }
}

@media (min-width: 700px) {
  :root {
    --font-base-step: var(--font-base-step-desktop);
  }
}



/* Optional: helper for consistent focus in light DOM
   (Shadow DOM components should implement their own focus styles) */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

/* Router view wrapper: make room for fixed bottom footer. */
.view-shell {
  box-sizing: border-box;
  padding-bottom: calc(var(--app-footer-height, 0px) + env(safe-area-inset-bottom, 0px) + 16px);
}