/* Design Tokens - Lovable Inspired Theme */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600&display=swap');

:root {
  /* Colors */
  --bg-cream: #f7f4ed;
  --text-charcoal: #1c1c1c;
  --color-charcoal: #1c1c1c; /* backward compatibility */
  --text-offwhite: #fcfbf8;
  --color-offwhite: #fcfbf8; /* backward compatibility */
  --text-muted: #5f5f5d;
  --color-muted: #5f5f5d; /* backward compatibility */
  
  /* Grays based on Opacity of charcoal */
  --charcoal-100: #1c1c1c;
  --charcoal-83: rgba(28, 28, 28, 0.83);
  --charcoal-82: rgba(28, 28, 28, 0.82);
  --charcoal-40: rgba(28, 28, 28, 0.4);
  --charcoal-04: rgba(28, 28, 28, 0.04);
  --charcoal-03: rgba(28, 28, 28, 0.03);
  
  /* backward compatibility colors */
  --color-charcoal-83: rgba(28, 28, 28, 0.83);
  --color-charcoal-82: rgba(28, 28, 28, 0.82);
  --color-charcoal-40: rgba(28, 28, 28, 0.4);
  --color-charcoal-04: rgba(28, 28, 28, 0.04);
  --color-charcoal-03: rgba(28, 28, 28, 0.03);

  /* Borders */
  --border-light: #eceae4;
  --border-passive: #eceae4; /* backward compatibility */
  --border-interactive: rgba(28, 28, 28, 0.4);

  /* Focus & Depth */
  --ring-blue: rgba(59, 130, 246, 0.5);
  --focus-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  --shadow-focus: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  --button-inset-shadow: rgba(255, 255, 255, 0.2) 0px 0.5px 0px 0px inset, 
                         rgba(0, 0, 0, 0.2) 0px 0px 0px 0.5px inset, 
                         rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  --shadow-inset-button: rgba(255, 255, 255, 0.2) 0px 0.5px 0px 0px inset, 
                         rgba(0, 0, 0, 0.2) 0px 0px 0px 0.5px inset, 
                         rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;

  /* Radius Scale */
  --radius-micro: 4px;
  --radius-standard: 6px;
  --radius-comfortable: 8px;
  --radius-card: 12px;
  --radius-container: 16px;
  --radius-pill: 9999px;
  
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-9999: 9999px;

  /* Font Stack & Typography Properties */
  --font-family: 'Camera Plain Variable', 'Camera Plain', 'Outfit', ui-sans-serif, system-ui, -apple-system, sans-serif;
  
  --fw-normal: 400;
  --fw-medium: 480;
  --fw-semibold: 600;

  --fs-60: 60px;
  --ls-60: -1.5px;
  --fs-48: 48px;
  --ls-48: -1.2px;
  --fs-36: 36px;
  --ls-36: -0.9px;
  --fs-20: 20px;
  --fs-18: 18px;
  --fs-16: 16px;
  --fs-14: 14px;

  /* Spacing Scale (8px base, 8~208px) */
  --space-1: 8px;
  --space-1-5: 10px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 40px;
  --space-7: 56px;
  --space-8: 80px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 176px;
  --space-12: 192px;
  --space-13: 208px;
}