/* ============================================================
   Tayana Domiciano — Design System Tokens
   Fonte: 03-design-system/tokens/
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     Fonte
     ---------------------------------------------------------- */
  --font-family: 'Raleway', sans-serif;

  /* ----------------------------------------------------------
     Tipografia — escalas
     ---------------------------------------------------------- */

  /* Display */
  --type-display-size:        56px;
  --type-display-weight:      200;
  --type-display-line-height: 1.15;
  --type-display-tracking:    0.04em;

  /* H1 */
  --type-h1-size:        40px;
  --type-h1-weight:      300;
  --type-h1-line-height: 1.2;
  --type-h1-tracking:    0.03em;

  /* H2 */
  --type-h2-size:        32px;
  --type-h2-weight:      300;
  --type-h2-line-height: 1.3;
  --type-h2-tracking:    0.02em;

  /* H3 */
  --type-h3-size:        24px;
  --type-h3-weight:      400;
  --type-h3-line-height: 1.4;
  --type-h3-tracking:    0.01em;

  /* H4 */
  --type-h4-size:        20px;
  --type-h4-weight:      500;
  --type-h4-line-height: 1.4;

  /* Body */
  --type-body-lg-size:        18px;
  --type-body-lg-weight:      300;
  --type-body-lg-line-height: 1.7;

  --type-body-md-size:        16px;
  --type-body-md-weight:      300;
  --type-body-md-line-height: 1.7;

  --type-body-sm-size:        14px;
  --type-body-sm-weight:      400;
  --type-body-sm-line-height: 1.6;

  /* Caption */
  --type-caption-size:        12px;
  --type-caption-weight:      400;
  --type-caption-line-height: 1.5;
  --type-caption-tracking:    0.02em;

  /* Label */
  --type-label-size:        12px;
  --type-label-weight:      500;
  --type-label-line-height: 1.4;
  --type-label-tracking:    0.06em;
  --type-label-transform:   uppercase;

  /* ----------------------------------------------------------
     Cores — brand
     ---------------------------------------------------------- */
  --color-brand-primary: #e2dbd3;
  --color-brand-accent:  #c9bfb5;

  /* Cores — surface */
  --color-surface-default: #ffffff;
  --color-surface-subtle:  #faf9f7;
  --color-surface-muted:   #f0ece7;

  /* Cores — texto */
  --color-text-primary:   #1a1a18;
  --color-text-secondary: #6b6660;
  --color-text-disabled:  #b0aca8;
  --color-text-inverse:   #ffffff;
  --color-text-brand:     #e2dbd3;

  /* Cores — borda */
  --color-border-default: #e8e3df;
  --color-border-subtle:  #f0ece7;
  --color-border-focus:   #e2dbd3;
  --color-border-error:   #c97b6b;

  /* Cores — feedback */
  --color-feedback-success:         #7c9e8a;
  --color-feedback-success-surface: #eef4f1;
  --color-feedback-error:           #c97b6b;
  --color-feedback-error-surface:   #faf1ef;

  /* Cores — overlay */
  --color-overlay-soft:   rgba(26, 26, 24, 0.04);
  --color-overlay-medium: rgba(26, 26, 24, 0.08);
  --color-overlay-strong: rgba(26, 26, 24, 0.40);

  /* ----------------------------------------------------------
     Espaçamento — escala 4px
     ---------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ----------------------------------------------------------
     Bordas — radius
     ---------------------------------------------------------- */
  --border-radius-none:   0px;
  --border-radius-subtle: 2px;
  --border-radius-sm:     4px;
  --border-radius-md:     8px;
  --border-radius-lg:     16px;
  --border-radius-xl:     24px;
  --border-radius-full:   9999px;

  --border-width-hairline: 1px;

  /* Aliases semânticos de cor de borda */
  --border-color-default: #e8e3df;
  --border-color-subtle:  #f0ece7;
  --border-color-focus:   #e2dbd3;
  --border-color-error:   #c97b6b;
  --border-color-brand:   #e2dbd3;

  /* ----------------------------------------------------------
     Sombras
     ---------------------------------------------------------- */
  --shadow-none: none;
  --shadow-xs:   0 1px 2px  rgba(26, 26, 24, 0.04);
  --shadow-sm:   0 2px 8px  rgba(26, 26, 24, 0.06);
  --shadow-md:   0 4px 16px rgba(26, 26, 24, 0.08);
  --shadow-lg:   0 8px 32px rgba(26, 26, 24, 0.10);

  /* ----------------------------------------------------------
     Motion — duração
     ---------------------------------------------------------- */
  --motion-instant: 0ms;
  --motion-fast:    150ms;
  --motion-normal:  250ms;
  --motion-slow:    400ms;
  --motion-slower:  600ms;

  /* Motion — easing */
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-linear: linear;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ----------------------------------------------------------
     Layout
     ---------------------------------------------------------- */
  --page-padding:      64px;
  --content-max-width: 1200px;
}

/* Tipografia responsiva — tablet */
@media (max-width: 1024px) {
  :root {
    --page-padding: 40px;
  }
}

/* Tipografia responsiva — mobile */
@media (max-width: 768px) {
  :root {
    --type-display-size: 32px;
    --type-h1-size:      26px;
    --type-h2-size:      22px;
    --type-h3-size:      18px;
    --type-h4-size:      16px;
    --page-padding:      16px;
  }
}

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