/* ============================================================
   BASE.CSS — Shared design tokens for the Component Library
   Used by both the library browser UI and all component iframes.
   Light theme is the default; dark theme activates via body.dark
   ============================================================ */

/* ── Fonts ─────────────────────────────────────────────────── */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
}

/* ── Border radii ───────────────────────────────────────────── */
:root {
  --border-radius-sm: 4px;
  --border-radius-md: 6px;
  --border-radius-lg: 10px;
  --border-radius-xl: 14px;
  --border-radius-full: 9999px;
}

/* ── Shadows ────────────────────────────────────────────────── */
:root {
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.09), 0 2px 4px rgba(0,0,0,0.05);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06);
}

/* ── Transitions ────────────────────────────────────────────── */
:root {
  --transition-fast: 0.12s ease;
  --transition-base: 0.18s ease;
}

/* ════════════════════════════════════════════════════════════
   LIGHT THEME (default)
   ════════════════════════════════════════════════════════════ */
:root {
  /* Text */
  --color-text-primary:   #0f0f0f;
  --color-text-secondary: #555555;
  --color-text-tertiary:  #999999;
  --color-text-disabled:  #c4c4c4;
  --color-text-inverse:   #ffffff;
  --color-text-accent:    #2563eb;

  /* Backgrounds */
  --color-background-primary:   #ffffff;
  --color-background-secondary: #f5f5f5;
  --color-background-tertiary:  #ebebeb;
  --color-background-overlay:   rgba(0, 0, 0, 0.04);
  --color-background-accent:    #eff6ff;

  /* Borders */
  --color-border-primary:   #d0d0d0;
  --color-border-secondary: #e0e0e0;
  --color-border-tertiary:  #ececec;
  --color-border-focus:     #2563eb;

  /* Semantic: info (blue) */
  --color-background-info:  #E6F1FB;
  --color-text-info:        #0C447C;
  --color-border-info:      #B5D4F4;

  /* Semantic: success (green) */
  --color-background-success: #EAF3DE;
  --color-text-success:       #27500A;
  --color-border-success:     #B6D899;

  /* Semantic: warning (amber) */
  --color-background-warning: #FAEEDA;
  --color-text-warning:       #633806;
  --color-border-warning:     #F2C97E;

  /* Semantic: danger (red) */
  --color-background-danger:  #FCEBEB;
  --color-text-danger:        #791F1F;
  --color-border-danger:      #F4AEAE;

  /* Category badges */
  --color-cat-inputs-bg:      #E6F1FB;
  --color-cat-inputs-text:    #0C447C;
  --color-cat-buttons-bg:     #EAF3DE;
  --color-cat-buttons-text:   #27500A;
  --color-cat-display-bg:     #EEEDFE;
  --color-cat-display-text:   #3C3489;
  --color-cat-feedback-bg:    #FAEEDA;
  --color-cat-feedback-text:  #633806;
  --color-cat-navigation-bg:  #FBEAF0;
  --color-cat-navigation-text:#72243E;
  --color-cat-layout-bg:      #F1EFE8;
  --color-cat-layout-text:    #444441;
}

/* ════════════════════════════════════════════════════════════
   DARK THEME — activated by body.dark
   ════════════════════════════════════════════════════════════ */
body.dark {
  /* Text */
  --color-text-primary:   #f0f0f0;
  --color-text-secondary: #aaaaaa;
  --color-text-tertiary:  #666666;
  --color-text-disabled:  #444444;
  --color-text-inverse:   #0f0f0f;
  --color-text-accent:    #60a5fa;

  /* Backgrounds */
  --color-background-primary:   #141414;
  --color-background-secondary: #1e1e1e;
  --color-background-tertiary:  #272727;
  --color-background-overlay:   rgba(255, 255, 255, 0.04);
  --color-background-accent:    #1e2a3a;

  /* Borders */
  --color-border-primary:   #3a3a3a;
  --color-border-secondary: #2d2d2d;
  --color-border-tertiary:  #242424;
  --color-border-focus:     #60a5fa;

  /* Semantic: info */
  --color-background-info:  #0f2033;
  --color-text-info:        #7ec3f7;
  --color-border-info:      #1e4a70;

  /* Semantic: success */
  --color-background-success: #0f2010;
  --color-text-success:       #86d45a;
  --color-border-success:     #1e4a20;

  /* Semantic: warning */
  --color-background-warning: #271a07;
  --color-text-warning:       #f5c36a;
  --color-border-warning:     #5a3a10;

  /* Semantic: danger */
  --color-background-danger:  #271010;
  --color-text-danger:        #f59a9a;
  --color-border-danger:      #5a1e1e;

  /* Category badges (dark variants) */
  --color-cat-inputs-bg:      #0f2033;
  --color-cat-inputs-text:    #7ec3f7;
  --color-cat-buttons-bg:     #0f2010;
  --color-cat-buttons-text:   #86d45a;
  --color-cat-display-bg:     #1a1540;
  --color-cat-display-text:   #a89ef5;
  --color-cat-feedback-bg:    #271a07;
  --color-cat-feedback-text:  #f5c36a;
  --color-cat-navigation-bg:  #27101a;
  --color-cat-navigation-text:#f59ab8;
  --color-cat-layout-bg:      #1e1e1a;
  --color-cat-layout-text:    #c4c4b8;

  /* Shadows are more subtle in dark mode */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3),  0 1px 2px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.25);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.5), 0 4px 8px rgba(0,0,0,0.3);
}

/* ── Base resets (applied when base.css is the only stylesheet) ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  background: var(--color-background-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}