/* Design Tokens — Eplep.ai Wireframe
   Gråskala brand-farger for wireframe-fasen.
   Design-fasen genererer prosjektspesifikk tokens.css.

   Hover/variant-farger beregnes automatisk med color-mix().
   Typografi er fluid med clamp() — skalerer mellom 375px og 1440px. */

:root {
  /* --- Neutral palette (stone) --- */
  --neutral-50:  #fafaf9;
  --neutral-100: #f5f5f4;
  --neutral-200: #e7e5e4;
  --neutral-300: #d6d3d1;
  --neutral-400: #a8a29e;
  --neutral-500: #78716c;
  --neutral-600: #57534e;
  --neutral-700: #44403c;
  --neutral-800: #292524;
  --neutral-900: #1c1917;

  /* --- Semantic colors --- */
  --color-bg:           var(--neutral-50);
  --color-surface:      #fff;
  --color-text:         var(--neutral-900);
  --color-muted:        var(--neutral-500);
  --color-border:       var(--neutral-200);
  --color-input-border: var(--neutral-300);

  /* --- Brand (wireframe: gråskala) --- */
  --color-accent:       #666;
  --color-accent-hover: #555;
  --color-accent-soft:  color-mix(in srgb, var(--color-accent) 12%, white);
  --color-cta:          #444;
  --color-cta-hover:    #333;

  /* --- Status --- */
  --color-success:    #15803d;
  --color-success-bg: color-mix(in srgb, var(--color-success) 12%, white);
  --color-warning:      #b45309;
  --color-warning-bg:   color-mix(in srgb, var(--color-warning) 12%, white);
  --color-warning-text: color-mix(in srgb, var(--color-warning) 85%, black);
  --color-error:        #dc2626;

  /* --- Fluid typography scale (375px → 1440px) --- */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   clamp(1.125rem, 1.06rem + 0.28vw, 1.25rem);
  --text-2xl:  clamp(1.25rem, 1.13rem + 0.47vw, 1.5rem);
  --text-3xl:  clamp(1.5rem, 1.32rem + 0.70vw, 1.875rem);
  --text-4xl:  clamp(1.75rem, 1.51rem + 0.94vw, 2.25rem);
  --text-5xl:  clamp(2.25rem, 1.78rem + 1.88vw, 3.25rem);

  /* --- Spacing (4px base grid) --- */
  --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;

  /* --- Border radius --- */
  --radius-sm:   4px;
  --radius:      8px;
  --radius-lg:   12px;
  --radius-full: 999px;

  /* --- Shadows --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow:    0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);

  /* --- Transitions --- */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --duration:    150ms;
  --duration-md: 250ms;
  --duration-lg: 350ms;

  /* --- Typography (families) --- */
  --font-heading: system-ui, -apple-system, sans-serif;
  --font-body:    system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, monospace;
  --font-signature: 'Georgia', serif;

  /* --- Typography (weights) --- */
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* --- Typography (line heights) --- */
  --leading-tight:  1.2;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* --- Layout --- */
  --container-max: 1200px;
  --container-pad: clamp(1rem, 5vw, 2rem);
  --section-pad-y: clamp(3rem, 8vw, 6rem);
  --nav-height:    64px;

  /* --- Z-index --- */
  --z-nav:   100;
  --z-modal: 1000;
  --z-skip:  10000;

  /* --- Component tokens --- */
  --btn-padding:     0.875rem 2rem;
  --btn-radius:      var(--radius);
  --btn-font-weight: var(--weight-bold);

  --card-radius:       var(--radius-lg);
  --card-padding:      var(--space-6);
  --card-shadow:       var(--shadow);
  --card-shadow-hover: var(--shadow-lg);

  --input-padding: var(--space-3) var(--space-4);
  --input-radius:  var(--radius);

  /* --- Overlay / Glass --- */
  --overlay-bg:   rgba(0, 0, 0, 0.5);
  --hero-overlay: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, transparent 70%);
  --glass-blur:   20px;
  --glass-bg:     rgba(0, 0, 0, 0.3);
}

/* --- Animations --- */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
@keyframes typingBounce {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}