/* ============================================
   SCIPYO DESIGN TOKENS
   Style: Google / Material Inspired
   Fonts: Inter (→ Google Sans)
   Accent: #1A73E8 (Google Blue)
   ============================================ */

:root {
  /* === COLORS === */

  /* Backgrounds */
  --color-bg-primary:    #FFFFFF;
  --color-bg-secondary:  #F8F9FA;
  --color-bg-dark:       #202124;
  --color-bg-blue:       #E8F0FE;
  --color-bg-card:       #FFFFFF;
  --color-bg-input:      #F1F3F4;

  /* Accent (Google Blue) */
  --color-accent:        #1A73E8;
  --color-accent-dark:   #1967D2;
  --color-accent-light:  #4285F4;
  --color-accent-muted:  rgba(26, 115, 232, 0.08);

  /* Google brand colors */
  --color-google-blue:   #4285F4;
  --color-google-red:    #EA4335;
  --color-google-yellow: #FBBC04;
  --color-google-green:  #34A853;

  /* Text */
  --color-text-primary:  #202124;
  --color-text-secondary:#5F6368;
  --color-text-muted:    #9AA0A6;
  --color-text-inverse:  #E8EAED;
  --color-white:         #FFFFFF;
  --color-link:          #1A73E8;

  /* Borders */
  --color-border:        #DADCE0;
  --color-border-light:  #E8EAED;
  --color-border-dark:   rgba(255, 255, 255, 0.12);
  --color-border-hover:  #BDC1C6;

  /* Legacy token mapping */
  --color-green:         #34A853;
  --color-red:           #EA4335;

  /* === TYPOGRAPHY === */

  --font-heading:  'Inter', 'Google Sans', Helvetica, Arial, sans-serif;
  --font-body:     'Inter', 'Google Sans Text', Helvetica, Arial, sans-serif;
  --font-nav:      'Inter', 'Google Sans', Helvetica, Arial, sans-serif;

  /* Sizes - Google Business: bold, impactful headings */
  --text-h1:       clamp(2.5rem, 5vw, 3.75rem);    /* 40-60px */
  --text-h2:       clamp(1.75rem, 3.5vw, 2.5rem);  /* 28-40px */
  --text-h3:       clamp(1.25rem, 2vw, 1.5rem);    /* 20-24px */
  --text-h4:       1.125rem;                         /* 18px */
  --text-body:     1rem;                             /* 16px */
  --text-body-lg:  1.125rem;                         /* 18px */
  --text-small:    0.875rem;                         /* 14px */
  --text-xs:       0.75rem;                          /* 12px */
  --text-nav:      0.875rem;                         /* 14px - Google nav size */

  /* Weights - Google Business: bolder headings */
  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  /* Line heights */
  --leading-tight:    1.2;
  --leading-snug:     1.3;
  --leading-normal:   1.5;
  --leading-relaxed:  1.7;

  /* Letter spacing */
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.015em;
  --tracking-wider:   0.025em;
  --tracking-widest:  0.05em;

  /* === SPACING (Google Business: dense, compact) === */
  --space-xs:   0.375rem;   /* 6px */
  --space-sm:   0.625rem;   /* 10px */
  --space-md:   1rem;       /* 16px */
  --space-lg:   1.25rem;    /* 20px */
  --space-xl:   1.5rem;     /* 24px */
  --space-2xl:  2rem;       /* 32px */
  --space-3xl:  3rem;       /* 48px */
  --space-4xl:  4rem;       /* 64px */

  /* === LAYOUT === */
  --container-max:    1200px;
  --container-wide:   1400px;
  --container-narrow: 720px;

  /* === RADIUS (Google = very rounded) === */
  --radius-none:  0;
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --radius-full:  9999px;

  /* === SHADOWS (Google = subtle elevation) === */
  --shadow-sm:    0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
  --shadow-md:    0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
  --shadow-lg:    0 4px 8px 0 rgba(60, 64, 67, 0.3), 0 8px 16px 4px rgba(60, 64, 67, 0.15);

  /* === TRANSITIONS === */
  --duration-fast:    100ms;
  --duration-base:    200ms;
  --duration-slow:    300ms;
  --duration-reveal:  500ms;
  --ease-out:         cubic-bezier(0.2, 0, 0, 1);
  --ease-standard:    cubic-bezier(0.2, 0, 0, 1);

  /* === Z-INDEX === */
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-header:     300;
  --z-overlay:    400;
  --z-modal:      500;
}