/**
 * OttoPILOT Design System — Variables
 * All design tokens live here. Change a value here, it changes everywhere.
 * Do not hardcode colors, fonts, or spacing in other CSS files.
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap');

:root {

  /* ── Color Palette ── */
  --cream:        #F5F2EC;
  --cream-dark:   #EAE6DE;
  --cream-border: #DDD8CE;
  --ink:          #1A1612;
  --ink-mid:      #3D3530;
  --ink-light:    #6B6560;
  --ink-muted:    #8B8275;
  --sand:         #C4A882;
  --sand-light:   rgba(196, 168, 130, 0.15);
  --sand-mid:     rgba(196, 168, 130, 0.3);
  --white:        #FFFFFF;

  /* ── Work Area Colors ── */
  --area-wow:       #219EBC;
  --area-elks:      #C4A882;
  --area-ot:        #1A1612;
  --area-personal:  #2D6A4F;
  --area-taazaa:    #8B6FBE;

  /* ── Semantic Colors ── */
  --danger:       #C0392B;
  --warning:      #E67E22;
  --success:      #2D6A4F;
  --info:         #219EBC;

  /* ── Typography ── */
  --font-serif:   'DM Serif Display', Georgia, serif;
  --font-sans:    'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'Courier New', monospace;

  --text-xs:      11px;
  --text-sm:      13px;
  --text-base:    14px;
  --text-md:      16px;
  --text-lg:      20px;
  --text-xl:      24px;
  --text-2xl:     32px;

  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;

  --leading-tight:  1.2;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  --tracking-wide:  0.05em;
  --tracking-wider: 0.1em;

  /* ── Spacing ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;

  /* ── Borders ── */
  --border:         0.5px solid var(--cream-border);
  --border-medium:  1px solid var(--cream-border);
  --border-strong:  1px solid var(--ink-muted);
  --radius-sm:      6px;
  --radius-md:      10px;
  --radius-lg:      16px;
  --radius-xl:      24px;
  --radius-full:    9999px;

  /* ── Layout ── */
  --topbar-height:    56px;
  --tabbar-height:    60px;
  --ottobar-height:   76px;
  --sidebar-width:    200px;
  --content-max:      800px;

  /* ── Transitions ── */
  --transition-fast:  0.15s ease;
  --transition-base:  0.2s ease;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 3px rgba(26, 22, 18, 0.08);
  --shadow-md:  0 4px 16px rgba(26, 22, 18, 0.1);
  --shadow-lg:  0 8px 32px rgba(26, 22, 18, 0.12);
}