@layer tokens, base, components, utilities;

@layer tokens {
  :root {
    /* Accent (Custom Blue) */
    --accent:        #0066CC;
    --accent-hover:  #0052A3;
    --accent-light:  #409CFF;
    --accent-subtle: #0066CC1A; /* 8-digit hex; last two chars = 10% alpha */

    /* Gray Scale */
    --color-gray:   #8E8E93;
    --color-gray-2: #AEAEB2;
    --color-gray-3: #C7C7CC;
    --color-gray-4: #D1D1D6;
    --color-gray-5: #E5E5EA;
    --color-gray-6: #F2F2F7;

    /* Text Colors */
    --color-text-primary:    #000000;
    --color-text-secondary:  #3C3C43;
    --color-text-tertiary:   #3C3C4399;
    --color-text-quaternary: #3C3C432E;

    /* Background Colors */
    --color-bg-primary:           #FFFFFF;
    --color-bg-secondary:         #F2F2F7;
    --color-bg-tertiary:          #FFFFFF;
    --color-bg-grouped:           #F2F2F7;
    --color-bg-grouped-secondary: #FFFFFF;

    /* Fill Colors */
    --color-fill-primary:    #78788033;
    --color-fill-secondary:  #78788028;
    --color-fill-tertiary:   #7676801E;
    --color-fill-quaternary: #74748014;

    /* Shadows */
    --shadow-card:       0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-nav:        0 1px 0 rgba(0, 0, 0, 0.1);


    /* Blur */
    --backdrop-blur: blur(20px);

    /* Typography — Family & Weights */
    --font-system: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif;
    --font-weight-ultralight: 100;
    --font-weight-thin:       200;
    --font-weight-light:      300;
    --font-weight-regular:    400;
    --font-weight-medium:     500;
    --font-weight-semibold:   600;
    --font-weight-bold:       700;
    --font-weight-heavy:      800;
    --font-weight-black:      900;

    /* Type Scale */
    --text-xs:   13px;
    --text-sm:   15px;
    --text-base: 17px;
    --text-lg:   19px;
    --text-xl:   21px;
    --text-2xl:  24px;
    --text-3xl:  clamp(24px, 5vw, 40px);
    --text-4xl:  clamp(32px, 6vw, 64px);
    --text-hero: clamp(36px, 8vw, 96px);

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

    /* Border Radius */
    --radius-xs:  4px;
    --radius-sm:  6px;
    --radius-md:  8px;
    --radius-lg:  12px;
    --radius-xl:  16px;
    --radius-2xl: 20px;
    --radius-3xl: 24px;

    /* Transitions */
    --ease-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --ease-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --ease-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --color-text-primary:    #FFFFFF;
      --color-text-secondary:  #EBEBF5;
      --color-text-tertiary:   #EBEBF599;
      --color-text-quaternary: #EBEBF52E;

      --color-bg-primary:           #000000;
      --color-bg-secondary:         #1C1C1E;
      --color-bg-tertiary:          #2C2C2E;
      --color-bg-grouped:           #000000;
      --color-bg-grouped-secondary: #1C1C1E;

      --color-gray-3: #48484A;
      --color-gray-4: #3A3A3C;
      --color-gray-5: #2C2C2E;
      --color-gray-6: #1C1C1E;

      --shadow-card:       0 1px 3px rgba(0, 0, 0, 0.4);
      --shadow-card-hover: 0 6px 20px rgba(0, 0, 0, 0.5);

      --accent: var(--accent-light);
    }
  }

  :root[data-theme="dark"] {
    --color-text-primary:    #FFFFFF;
    --color-text-secondary:  #EBEBF5;
    --color-text-tertiary:   #EBEBF599;
    --color-text-quaternary: #EBEBF52E;

    --color-bg-primary:           #000000;
    --color-bg-secondary:         #1C1C1E;
    --color-bg-tertiary:          #2C2C2E;
    --color-bg-grouped:           #000000;
    --color-bg-grouped-secondary: #1C1C1E;

    --color-gray-3: #48484A;
    --color-gray-4: #3A3A3C;
    --color-gray-5: #2C2C2E;
    --color-gray-6: #1C1C1E;

    --shadow-card:       0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-card-hover: 0 6px 20px rgba(0, 0, 0, 0.5);
    --border-card-hover: rgba(64, 156, 255, 0.3);

    --accent: var(--accent-light);
  }

  :root[data-theme="light"] {
    --color-text-primary:    #000000;
    --color-text-secondary:  #3C3C43;
    --color-text-tertiary:   #3C3C4399;
    --color-text-quaternary: #3C3C432E;

    --color-bg-primary:           #FFFFFF;
    --color-bg-secondary:         #F2F2F7;
    --color-bg-tertiary:          #FFFFFF;
    --color-bg-grouped:           #F2F2F7;
    --color-bg-grouped-secondary: #FFFFFF;

    --color-gray-3: #C7C7CC;
    --color-gray-4: #D1D1D6;
    --color-gray-5: #E5E5EA;
    --color-gray-6: #F2F2F7;

    --shadow-card:       0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.15);

    --accent: #0066CC;
  }
}