/* ============================================================
   TÜRKERI GROUP — Design System Tokens
   ============================================================ */

:root {
  /* --- Color: Base --- */
  --color-surface:        #EDEAE3;
  --color-surface-subtle: #E4E0D8;
  --color-surface-alt:    #D9D4CA;
  --color-on-surface:     #1A1816;

  /* --- Color: Brand --- */
  --color-copper:         #2563EB;
  --color-copper-light:   #3B82F6;
  --color-copper-dark:    #1D4ED8;
  --color-stone:          #1E2A3A;

  /* --- Color: Text --- */
  --color-text-primary:   #1A1816;
  --color-text-secondary: #5A5652;
  --color-text-muted:     #908C87;
  --color-text-inverse:   #F2EFE9;

  /* --- Color: Hairlines --- */
  --color-rule:           rgba(26, 24, 22, 0.12);
  --color-rule-strong:    rgba(26, 24, 22, 0.24);

  /* --- Sub-brand: Decalgo (dark premium) --- */
  --color-decalgo-bg:     #0F0F0D;
  --color-decalgo-accent: #6C63FF;
  --color-decalgo-text:   #E8E6E1;

  /* --- Sub-brand: Decor (warm material) --- */
  --color-decor-accent:   #8B6914;
  --color-decor-surface:  #F0EBE1;

  /* --- Sub-brand: Mimarlık (cool stone) --- */
  --color-arch-accent:    #4A5568;
  --color-arch-surface:   #EEF0F3;

  /* --- Typography --- */
  --font-heading:         'Space Grotesk', 'Archivo', system-ui, sans-serif;
  --font-body:            'Inter', system-ui, sans-serif;

  --text-xs:   0.6875rem;   /* 11px */
  --text-sm:   0.8125rem;   /* 13px */
  --text-base: 1rem;         /* 16px */
  --text-md:   1.125rem;    /* 18px */
  --text-lg:   1.375rem;    /* 22px */
  --text-xl:   1.75rem;     /* 28px */
  --text-2xl:  2.25rem;     /* 36px */
  --text-3xl:  3rem;        /* 48px */
  --text-4xl:  4rem;        /* 64px */
  --text-5xl:  5.5rem;      /* 88px */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  --tracking-tight:  -0.03em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.12em;

  /* --- 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;
  --space-40:  10rem;
  --space-48:  12rem;

  /* --- Layout --- */
  --container-max: 1280px;
  --container-pad: var(--space-8);
  --nav-height:    72px;

  /* --- Radius --- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  /* --- Shadows --- */
  --shadow-sm: 0 1px 3px rgba(26, 24, 22, 0.08);
  --shadow-md: 0 4px 16px rgba(26, 24, 22, 0.10);
  --shadow-lg: 0 12px 40px rgba(26, 24, 22, 0.14);

  /* --- Motion --- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --duration-fast:   180ms;
  --duration-base:   320ms;
  --duration-slow:   600ms;
  --duration-slower: 1000ms;
}

/* --- Dark mode --- */
[data-theme="dark"] {
  --color-surface:        #1C1B19;
  --color-surface-subtle: #242320;
  --color-surface-alt:    #2E2D2A;
  --color-on-surface:     #F2EFE9;

  --color-text-primary:   #F2EFE9;
  --color-text-secondary: #B0ACA6;
  --color-text-muted:     #706C67;
  --color-text-inverse:   #1A1816;

  --color-rule:           rgba(242, 239, 233, 0.10);
  --color-rule-strong:    rgba(242, 239, 233, 0.20);

  --color-copper-light:   #3B82F6;
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}