@charset "utf-8";

:root {
  /*---------------------
    color
    --------------------- */
  /* Primary Color - Green */
  --color-primary-900: #0e9794;
  --color-primary-800: #00acae;
  --color-primary-400: #53c0c1;
  --color-primary-200: #9edcdc;
  --color-primary-100: #ddf0ec;
  --color-primary-50: #f3faf8;

  /* Secondary Color - Blue */
  --color-secondary-900: #006ba3;
  --color-secondary-800: #1d80c3;
  --color-secondary-400: #4ea7e4;
  --color-secondary-200: #9ecae8;
  --color-secondary-100: #e0f0fa;
  --color-secondary-100: #e0f0fa;
  --color-secondary-50: #f3f8fc;

  /* Accent Colors */
  --color-accent-yellow: #ffb300;

  /* Gradation Colors */
  --color-gradation-blue: linear-gradient(
    79.47deg,
    #05d2cd 33.2%,
    #0fa5f3 65.91%
  );

  /* Positive Color */
  --color-positive-900: #064e3b;
  --color-positive-800: #065f46;
  --color-positive-700: #027a48;
  --color-positive-600: #16a34a;
  --color-positive-500: #12b76a;
  --color-positive-400: #4ade80;
  --color-positive-300: #86efac;
  --color-positive-200: #bbf7d0;
  --color-positive-100: #ecfdf3;
  --color-positive-50: #f0fdf4;

  /* Negative Color */
  --color-negative-900: #450a0a;
  --color-negative-800: #7f1d1d;
  --color-negative-700: #b42318;
  --color-negative-600: #dc2626;
  --color-negative-500: #f04438;
  --color-negative-400: #f87171;
  --color-negative-300: #fca5a5;
  --color-negative-200: #fecaca;
  --color-negative-100: #ffe8e8;
  --color-negative-50: #fff5f5;

  /* Notification Color */
  --color-notification-900: #5a4600;
  --color-notification-800: #926f00;
  --color-notification-700: #d29300;
  --color-notification-600: #e6aa2d;
  --color-notification-500: #fec43f;
  --color-notification-400: #ffd255;
  --color-notification-300: #ffe585;
  --color-notification-200: #fff3b0;
  --color-notification-100: #fff9db;
  --color-notification-50: #fffcf5;

  /* Gray */
  --color-gray-1000: #000000;
  --color-gray-900: #1d1d1d;
  --color-gray-800: #3a3a3a;
  --color-gray-700: #5c5d5d;
  --color-gray-600: #6e6d6c;
  --color-gray-500: #898887;
  --color-gray-400: #b0b0b0;
  --color-gray-300: #d1d0d0;
  --color-gray-200: #e7e6e6;
  --color-gray-100: #f3f3f3;
  --color-gray-50: #fafafa;
  --color-gray-0: #ffffff;

  /*---------------------
    font-family
    --------------------- */
  --ff-ja: "Noto Sans JP", sans-serif;
  --ff-en: "Inter", sans-serif;

  /*---------------------
    font-size
    --------------------- */
  /* heading */
  --fs-heading-xxxl: 80px;
  --fs-heading-xxl: 48px;
  --fs-heading-xl: 36px;
  --fs-heading-lg: 32px;
  --fs-heading-md: 28px;
  --fs-heading-sm: 24px;
  --fs-heading-xs: 20px;

  /* body */
  --fs-body-md: 18px;
  --fs-body-base: 16px;
  --fs-body-sm: 15px;
  --fs-body-xs: 13px;
  --fs-body-xxs: 12px;

  /* link */
  --fs-link-xl: 20px;
  --fs-link-lg: 18px;
  --fs-link-base: 16px;
  --fs-link-sm: 15px;
  --fs-link-xs: 13px;

  /*---------------------
    font-weight
    --------------------- */
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;

  /*---------------------
    line-height
    --------------------- */
  --lineheigth-160: 1.6;
  --lineheigth-152: 1.52;
  --lineheigth-145: 1.45;
  --lineheigth-140: 1.4;
  --lineheigth-128: 1.28;
  --lineheigth-124: 1.24;
  --lineheigth-120: 1.2;

  /*---------------------
    border-radius
    --------------------- */
  --radius-base: 4px;

  /*---------------------
    transition
    --------------------- */
  --ts-base: 0.2s;

  /*---------------------
    opacity
    --------------------- */
  --opacity-base: 0.75;

  /*---------------------
    drop-shadow
    --------------------- */
  --elevation-base: drop-shadow(0px 4px 8px rgba(4, 47, 46, 0.08));
  --elevation-sm: drop-shadow(0px 4px 12px rgba(4, 47, 46, 0.2));

  /*---------------------
    box-shadow
    --------------------- */
  --shadow-base: 2.92326px 2.92326px 8.76979px rgba(0, 0, 0, 0.25);

  --shadow-header: 0px 4px 8px rgba(4, 47, 46, 0.08);
}