@layer tokens, base, components, utilities;

@layer tokens {
  :root {
    --ec-orange-primary: #e8850a;
    --ec-orange-hover: #d47808;
    --ec-orange-light: #fff3e0;
    --ec-grey-white: #ffffff;
    --ec-grey-light: #f5f5f5;
    --ec-grey-mid: #666666;
    --ec-grey-anthracite: #3a3a3a;
    --ec-grey-stroke: #dddddd;
    --ec-grey-stroke-disabled: #d8d8d8;
    --ec-grey-disabled: #cccccc;
    --ec-grey-dark: #222222;

    --ec-text-primary: var(--ec-grey-anthracite);
    --ec-text-secondary: var(--ec-grey-mid);
    --ec-text-disabled: var(--ec-grey-mid);
    --ec-text-accent: var(--ec-orange-primary);
    --ec-text-hover: var(--ec-orange-hover);
    --ec-text-inverse: var(--ec-grey-white);

    --ec-bg-white: var(--ec-grey-white);
    --ec-bg-light: var(--ec-grey-light);
    --ec-bg-mid: var(--ec-grey-anthracite);
    --ec-bg-accent: var(--ec-orange-primary);
    --ec-bg-accent-light: var(--ec-orange-light);
    --ec-bg-dark: var(--ec-grey-dark);
    --ec-bg-disabled: var(--ec-grey-disabled);

    --ec-stroke-default: var(--ec-grey-stroke);
    --ec-stroke-accent: var(--ec-orange-primary);
    --ec-stroke-disabled: var(--ec-grey-stroke-disabled);

    --ec-font-body: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;

    --ec-size-label: 0.625rem;
    --ec-size-xs: 0.75rem;
    --ec-size-sm: 0.875rem;
    --ec-size-md: 1rem;
    --ec-size-lg: 1.125rem;
    --ec-size-card-title: 1.25rem;
    --ec-size-card-title-lg: 2rem;
    --ec-size-number: 3rem;
    --ec-size-h3: 2.75rem;
    --ec-size-h2: 3.25rem;
    --ec-size-h1: 3.5rem;

    --ec-weight-regular: 400;
    --ec-weight-medium: 500;
    --ec-weight-bold: 700;
    --ec-weight-extrabold: 800;
    --ec-weight-black: 900;

    --ec-leading-flat: 1;
    --ec-leading-h1: 1.05;
    --ec-leading-title-lg: 1.1;
    --ec-leading-title: 1.3;
    --ec-leading-snug: 1.4;
    --ec-leading-default: 1.5;
    --ec-leading-relaxed: 1.6;
    --ec-leading-body-lg: 1.7;

    --ec-tracking-label: 1px;

    --ec-space-4: 4px;
    --ec-space-6: 6px;
    --ec-space-8: 8px;
    --ec-space-12: 12px;
    --ec-space-16: 16px;
    --ec-space-20: 20px;
    --ec-space-24: 24px;
    --ec-space-32: 32px;
    --ec-space-40: 40px;

    --ec-page-max: 1440px;
    --ec-section-px-sm: 16px;
    --ec-section-px: 56px;
    --ec-section-px-lg: 169px;
    --ec-section-px-xl: 281px;
    --ec-section-py: 80px;
    --ec-section-py-md: 56px;
    --ec-section-py-sm: 40px;
    --ec-section-gap: 48px;

    --ec-radius-sm: 4px;
    --ec-radius: 8px;
    --ec-radius-xl: 16px;
    --ec-radius-full: 100px;

    --ec-shadow-accent: 0 4px 8px rgb(232 133 10 / 0.35);
    --ec-shadow-accent-hover: 0 8px 12px rgb(232 133 10 / 0.45);
    --ec-shadow-soft: 0 8px 12px rgb(0 0 0 / 0.12);

    --ec-control-height: 42px;
    --ec-transition: 0.15s ease;
  }
}