/* ============================================================
   ROGERS RENTALS — DESIGN TOKENS
   Art direction: Trust + Authority + Jacksonville warmth
   Primary: Deep teal (professional property management)
   Accent: Warm amber (Florida sunshine / approachability)
   Surfaces: Warm off-white (livable, not sterile)
   ============================================================ */

:root,
[data-theme='light'] {
  /* Surfaces */
  --color-bg:              #F6F4F0;
  --color-surface:         #FAFAF7;
  --color-surface-2:       #FFFFFF;
  --color-surface-offset:  #EDE9E2;
  --color-divider:         #DDD9D2;
  --color-border:          #D0CBC1;

  /* Text */
  --color-text:            #1E1C18;
  --color-text-muted:      #6B6860;
  --color-text-faint:      #B0ADA8;
  --color-text-inverse:    #F8F6F2;

  /* Primary — Deep Teal */
  --color-primary:         #0A6B6E;
  --color-primary-hover:   #08555A;
  --color-primary-active:  #063E42;
  --color-primary-light:   #E0EFEF;
  --color-primary-mid:     #4A9098;

  /* Accent — Warm Amber */
  --color-accent:          #C97A1C;
  --color-accent-hover:    #A8630E;
  --color-accent-light:    #FDF3E3;
  --color-accent-text:     #7A4800;

  /* Semantic */
  --color-success:         #3A7A1E;
  --color-success-light:   #EAF4E2;
  --color-error:           #B03030;
  --color-error-light:     #FDEAEA;
  --color-warning:         #C97A1C;
  --color-warning-light:   #FDF3E3;

  /* Radius */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.875rem;
  --radius-xl:   1.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(30,28,24,0.07), 0 1px 2px rgba(30,28,24,0.04);
  --shadow-md:  0 4px 14px rgba(30,28,24,0.09), 0 2px 6px rgba(30,28,24,0.05);
  --shadow-lg:  0 12px 36px rgba(30,28,24,0.13), 0 4px 12px rgba(30,28,24,0.07);
  --shadow-xl:  0 24px 56px rgba(30,28,24,0.16), 0 8px 24px rgba(30,28,24,0.09);

  /* Transitions */
  --transition: 200ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Content widths */
  --content-narrow:  680px;
  --content-default: 1000px;
  --content-wide:    1280px;

  /* Type scale */
  --text-xs:   clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.82rem + 0.3vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem + 0.7vw, 1.5rem);
  --text-xl:   clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl:  clamp(2.5rem, 1rem + 4vw, 5rem);
  --text-hero: clamp(3rem, 0.5rem + 7vw, 7.5rem);

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
}

[data-theme='dark'] {
  --color-bg:              #141210;
  --color-surface:         #1A1916;
  --color-surface-2:       #1F1E1B;
  --color-surface-offset:  #252320;
  --color-divider:         #2E2C28;
  --color-border:          #3A3830;
  --color-text:            #E8E5DF;
  --color-text-muted:      #8C8980;
  --color-text-faint:      #5A5850;
  --color-text-inverse:    #1A1916;
  --color-primary:         #5BA8A8;
  --color-primary-hover:   #7DBDBD;
  --color-primary-active:  #9ACECE;
  --color-primary-light:   #1A2E2E;
  --color-primary-mid:     #4A9098;
  --color-accent:          #E8952A;
  --color-accent-hover:    #F0A840;
  --color-accent-light:    #2A2010;
  --color-accent-text:     #F0A840;
  --color-success:         #6AAA3A;
  --color-success-light:   #1A2A10;
  --color-error:           #E05050;
  --color-error-light:     #2A1010;
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.25);
  --shadow-md:  0 4px 14px rgba(0,0,0,0.35);
  --shadow-lg:  0 12px 36px rgba(0,0,0,0.45);
  --shadow-xl:  0 24px 56px rgba(0,0,0,0.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:              #141210;
    --color-surface:         #1A1916;
    --color-surface-2:       #1F1E1B;
    --color-surface-offset:  #252320;
    --color-divider:         #2E2C28;
    --color-border:          #3A3830;
    --color-text:            #E8E5DF;
    --color-text-muted:      #8C8980;
    --color-text-faint:      #5A5850;
    --color-text-inverse:    #1A1916;
    --color-primary:         #5BA8A8;
    --color-primary-hover:   #7DBDBD;
    --color-primary-active:  #9ACECE;
    --color-primary-light:   #1A2E2E;
    --color-primary-mid:     #4A9098;
    --color-accent:          #E8952A;
    --color-accent-hover:    #F0A840;
    --color-accent-light:    #2A2010;
    --color-accent-text:     #F0A840;
    --color-success:         #6AAA3A;
    --color-success-light:   #1A2A10;
    --color-error:           #E05050;
    --color-error-light:     #2A1010;
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.25);
    --shadow-md:  0 4px 14px rgba(0,0,0,0.35);
    --shadow-lg:  0 12px 36px rgba(0,0,0,0.45);
    --shadow-xl:  0 24px 56px rgba(0,0,0,0.55);
  }
}