/* ============================================
   PromptCraft Design Tokens
   Candy color system + spacing + typography
   ============================================ */

:root {
  /* ---- Candy Palette ---- */
  --color-candy-pink: #FF8FAB;
  --color-candy-lavender: #C3A6FF;
  --color-candy-mint: #7DDFC3;
  --color-candy-peach: #FFB997;
  --color-candy-sky: #89CFF3;
  --color-candy-lemon: #FFE66D;

  /* ---- Semantic Colors ---- */
  --color-bg-page: #FFF5F7;
  --color-bg-card: #FFFFFF;
  --color-bg-input: #FDFAFF;
  --color-text-primary: #2D2B3D;
  --color-text-secondary: #6B6880;
  --color-text-tertiary: #9994B0;
  --color-border: #F0E6F0;
  --color-border-light: #F8F0F8;
  --color-success: #7DDFC3;
  --color-error: #FF6B8A;
  --color-info: #89CFF3;

  /* ---- Gradients ---- */
  --gradient-primary: linear-gradient(135deg, #FF8FAB, #C3A6FF);
  --gradient-secondary: linear-gradient(135deg, #C3A6FF, #89CFF3);
  --gradient-warm: linear-gradient(135deg, #FFB997, #FF8FAB);
  --gradient-cool: linear-gradient(135deg, #89CFF3, #7DDFC3);
  --gradient-candy-bg: linear-gradient(160deg, #FFF5F7 0%, #F5F0FF 50%, #F0F8FF 100%);

  /* ---- Spacing ---- */
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 40px;
  --space-3xl: 48px;

  /* ---- Border Radius ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 2px 8px rgba(45, 43, 61, 0.06);
  --shadow-md: 0 4px 16px rgba(45, 43, 61, 0.08);
  --shadow-lg: 0 8px 32px rgba(45, 43, 61, 0.12);
  --shadow-glow-pink: 0 4px 20px rgba(255, 143, 171, 0.3);
  --shadow-glow-lavender: 0 4px 20px rgba(195, 166, 255, 0.3);

  /* ---- Typography ---- */
  --font-sans: 'Inter', 'LXGW WenKai Screen', system-ui, -apple-system, sans-serif;
  --font-mono: 'Fira Code', 'Consolas', monospace;

  /* ---- Transitions ---- */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Z-index Scale ---- */
  --z-header: 100;
  --z-overlay: 900;
  --z-panel: 950;
  --z-toast: 1000;
}

/* ============================================
   Dark Theme — [data-theme="dark"]
   Candy accent colors unchanged; backgrounds
   and text flip to deep-navy/purple tones.
   ============================================ */

[data-theme="dark"] {
  --color-bg-page:   #16131F;
  --color-bg-card:   #1F1B2E;
  --color-bg-input:  #26223A;

  /* Text: raised contrast to meet WCAG AA on dark backgrounds */
  --color-text-primary:   #F0ECFF;   /* ~13:1 on bg-card */
  --color-text-secondary: #C2BCDC;   /* ~7:1  on bg-card */
  --color-text-tertiary:  #9990B8;   /* ~4.5:1 on bg-card */

  --color-border:       #332E4A;
  --color-border-light: #2B2640;

  --color-success: #7DDFC3;
  --color-error:   #FF6B8A;
  --color-info:    #89CFF3;

  --gradient-candy-bg: linear-gradient(160deg, #16131F 0%, #1A1530 50%, #131820 100%);

  --shadow-sm: 0 2px 8px  rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.55);
}

/* ============================================
   Pro UI Mode — professional visual theme
   Independent from Candy/Dark theme toggle.
   ============================================ */

html[data-ui-mode="pro"] {
  --color-candy-pink: #A56B3F;
  --color-candy-lavender: #5F6673;
  --color-candy-mint: #7C806F;
  --color-candy-peach: #C08D5D;
  --color-candy-sky: #476478;
  --color-candy-lemon: #D4B06A;

  --color-bg-page: #EFE7D6;
  --color-bg-card: #FFF9EC;
  --color-bg-input: #F7EEDC;
  --color-text-primary: #242424;
  --color-text-secondary: #4E4E4E;
  --color-text-tertiary: #737066;
  --color-border: #BEB4A2;
  --color-border-light: #D9CFBB;

  --gradient-primary: linear-gradient(135deg, #343434, #6A6258);
  --gradient-secondary: linear-gradient(135deg, #6A6258, #9B7B55);
  --gradient-warm: linear-gradient(135deg, #8F6E49, #B0895B);
  --gradient-cool: linear-gradient(135deg, #475866, #6B756A);
  --gradient-candy-bg: linear-gradient(160deg, #EFE7D6 0%, #E5D9C1 100%);

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;

  --shadow-sm: 0 1px 2px rgba(36, 36, 36, 0.08);
  --shadow-md: 0 4px 14px rgba(36, 36, 36, 0.12);
  --shadow-lg: 0 12px 28px rgba(36, 36, 36, 0.18);
  --shadow-glow-pink: 0 2px 10px rgba(52, 52, 52, 0.16);
  --shadow-glow-lavender: 0 2px 10px rgba(52, 52, 52, 0.14);
}

html[data-ui-mode="pro"][data-theme="dark"] {
  --color-bg-page: #242424;
  --color-bg-card: #303030;
  --color-bg-input: #262626;
  --color-text-primary: #F1E7D2;
  --color-text-secondary: #D2C7B4;
  --color-text-tertiary: #A89C8C;
  --color-border: #55504A;
  --color-border-light: #43403B;

  --gradient-primary: linear-gradient(135deg, #F1E7D2, #B8AA91);
  --gradient-secondary: linear-gradient(135deg, #A89C8C, #6F7773);
  --gradient-warm: linear-gradient(135deg, #B8AA91, #8B765B);
  --gradient-cool: linear-gradient(135deg, #67747A, #8A8975);
  --gradient-candy-bg: linear-gradient(160deg, #202020 0%, #2A2926 100%);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.42);
  --shadow-glow-pink: 0 2px 10px rgba(241, 231, 210, 0.12);
  --shadow-glow-lavender: 0 2px 10px rgba(241, 231, 210, 0.1);
}