@import "tailwindcss";

@import "tw-animate-css";

@layer godxjp-ui-responsive;

[lang="ja"] {
  --font-family-sans: var(--font-sans-ja, var(--font-sans-base));
}
[lang="ko"] {
  --font-family-sans: var(--font-sans-ko, var(--font-sans-base));
}
[lang="vi"] {
  --font-family-sans: var(--font-sans-vi, var(--font-sans-base));
}
[lang="zh"],
[lang="zh-Hans"],
[lang="zh-CN"] {
  --font-family-sans: var(--font-sans-zh-hans, var(--font-sans-base));
}
[lang="zh-Hant"],
[lang="zh-TW"] {
  --font-family-sans: var(--font-sans-zh-hant, var(--font-sans-base));
}

@source inline(
  "{bg,text,border,ring}-{primary,secondary,muted,accent,destructive,success,warning,info,attention}"
);
@source inline(
  "{bg,text}-{primary,secondary,muted,accent,destructive,success,warning,info,attention}-foreground"
);

@source inline("{text,bg,border}-{foreground-tertiary,foreground-disabled,link,brand}");
@source inline("bg-{primary,secondary,destructive}-{hover,active}");

@source inline("rounded-{xs,xl,2xl}");
@source inline("text-2xs");
@source inline("text-{3xl,4xl,5xl}");
@source inline("text-{primary,success,warning,info,error}-strong");

@source "../**/*.{tsx,ts,js}";
@import "../tokens/base.css";

@import "./focus-ring.css";
@import "./density.css";

@theme inline {
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));
  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));
  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));
  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));
  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --color-success: hsl(var(--success));
  --color-success-foreground: hsl(var(--success-foreground));
  --color-warning: hsl(var(--warning));
  --color-warning-foreground: hsl(var(--warning-foreground));
  --color-info: hsl(var(--info));
  --color-info-foreground: hsl(var(--info-foreground));
  --color-attention: hsl(var(--attention));
  --color-attention-foreground: hsl(var(--attention-foreground));

  --color-primary-strong: hsl(
    var(--text-primary, from hsl(var(--primary)) var(--text-primary-channels))
  );
  --color-success-strong: hsl(var(--text-success));
  --color-warning-strong: hsl(var(--text-warning));
  --color-info-strong: hsl(var(--text-info));
  --color-error-strong: hsl(var(--text-error));
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-chart-6: var(--chart-6);

  --radius-xs: calc(
    var(--radius) / var(--radius-ratio) / var(--radius-ratio) / var(--radius-ratio)
  );
  --radius-sm: calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio));
  --radius-md: calc(var(--radius) / var(--radius-ratio));
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * var(--radius-ratio));
  --radius-2xl: calc(var(--radius) * var(--radius-ratio) * var(--radius-ratio));

  --color-foreground-tertiary: hsl(var(--text-tertiary));
  --color-foreground-disabled: hsl(var(--text-disabled));
  --color-link: hsl(var(--text-link, from hsl(var(--primary)) var(--text-link-channels)));
  --color-brand: hsl(var(--text-brand, from hsl(var(--primary)) var(--text-brand-channels)));

  --color-primary-hover: hsl(
    var(--primary-hover, from hsl(var(--primary)) var(--primary-hover-channels))
  );
  --color-primary-active: hsl(
    var(--primary-active, from hsl(var(--primary)) var(--primary-active-channels))
  );
  --color-secondary-hover: hsl(var(--secondary-hover));
  --color-secondary-active: hsl(var(--secondary-active));
  --color-destructive-hover: hsl(var(--destructive-hover));
  --color-destructive-active: hsl(var(--destructive-active));

  --font-sans: var(--font-family-sans);
  --font-mono: var(--font-family-mono);

  --color-wa-ai: var(--wa-ai);
  --color-wa-gunjo: var(--wa-gunjo);
  --color-wa-ruri: var(--wa-ruri);
  --color-wa-kon: var(--wa-kon);
  --color-wa-wakatake: var(--wa-wakatake);
  --color-wa-moegi: var(--wa-moegi);
  --color-wa-yamabuki: var(--wa-yamabuki);
  --color-wa-shu: var(--wa-shu);
  --color-wa-akane: var(--wa-akane);
  --color-wa-enji: var(--wa-enji);
  --color-wa-sakura: var(--wa-sakura);
  --color-wa-sumi: var(--wa-sumi);
  --color-wa-nezu: var(--wa-nezu);

  --text-2xs: var(
    --font-size-2xs,
    calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
  );
  --text-xs: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
  --text-sm: var(--font-size-sm, var(--font-size-base));
  --text-base: var(--font-size-base);
  --text-lg: var(
    --font-size-lg,
    calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio))
  );
  --text-xl: var(
    --font-size-xl,
    calc(
      var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) *
        var(--font-size-ratio)
    )
  );
  --text-2xl: var(
    --font-size-2xl,
    calc(
      var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) *
        var(--font-size-ratio) * var(--font-size-ratio)
    )
  );

  --text-3xl: var(
    --font-size-3xl,
    calc(var(--font-size-display) / var(--font-size-display-ratio) / var(--font-size-display-ratio))
  );
  --text-4xl: var(--font-size-4xl, calc(var(--font-size-display) / var(--font-size-display-ratio)));
  --text-5xl: var(--font-size-5xl, var(--font-size-display));
}

@layer base {
  * {
    border-color: hsl(var(--border));
  }

  :where(select, input)[aria-hidden="true"][tabindex="-1"],
  .sr-only {
    top: 0;
    inset-inline-start: 0;
  }

  body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));

    font-family: var(--font-family-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-body);
    font-feature-settings:
      "cv02",
      "cv03",
      "cv04",
      "cv11",
      "rlig" 1,
      "calt" 1;
  }

  :where(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-family-display);
  }

  h1 {
    font-size: var(
      --heading-h1,
      calc(
        var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) *
          var(--font-size-ratio)
      )
    );
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
  }

  h2 {
    font-size: var(
      --heading-h2,
      calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio))
    );
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
  }

  h3 {
    font-size: var(--heading-h3, var(--font-size-base));
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
  }

  h4 {
    font-size: var(
      --heading-h4,
      var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))
    );
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
  }

  h5,
  h6 {
    font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
  }

  code {
    font-family: var(--font-family-mono);
  }
}