@charset "utf-8";

:root {
  /* ---------- Color ---------- */
  --white: #fff;
  --black: #000;
  --black-000: #000;
  --black-100: #111;
  --black-200: #222;
  --black-300: #333;
  --black-400: #444;
  --black-500: #555;
  --black-600: #666;
  --black-700: #777;
  --black-800: #888;
  --black-900: #999;
  --gray-100: #f4f4f4;
  --gray-200: #f5f5f0;
  --gray-300: #e5e5e5;
  --gray-400: #dddddd;
  --gray-500: #707070;
  --green-100: #0c3e2a;
  --green-200: #1f6b68;
  --green-300: rgb(239, 245, 243);
  --yellow-100: #E3A333;
  --yellow-200: #F9C975;
  --yellow-300: #FFFEDD;
  --red-100: #a53131;
  --red-200: #e06d6d;
  --red-300: #ebb0b0;
  --blue-100: #102a6b;
  --blue-200: #015185;
  --blue-300: #e5eaef;

  /* Role Based Colors */
  --primary: var(--blue-200);
  --secondary: var(--blue-100);
  --accent: var(--green-100);
  --text-color: var(--black-300);
  --border-color: #ddd;
  --hover-color: var(--primary);
  --bg-color: var(--green-300);
  --bg-sub-color: var(--blue-300);

  /* ---------- font family ---------- */
  --sub-font: "Zen Maru Gothic", serif;
  --text-primary-color: var(--black);

  /* ---------- border radius ---------- */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 20px;
  --rounded-pill: 50rem;

  /* ---------- font weight ---------- */
  --font-weight-thin: 100;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* ---------- z-index ---------- */
  --zindex-under: -1000;
  --zindex-header: 1000;
  --zindex-fixed: 1030;

  /* ---------- transition / hover ---------- */
  --transition: .2s;
  --hover-opacity: .8;
  --hover-transform: scale(1.15);

  /* ---------- VW / REM Calculation Base ---------- */
  --base-viewport-size: 375;
  --base-root-size: 10;
  --vw-unit: calc(100vw / var(--base-viewport-size));
  --rem-unit: calc(1rem / var(--base-root-size));

  /* ---------- Grid containers ---------- */
  --container-padding: calc(var(--vw-unit) * 20);
  --container-max-width: 100%;
  --container-lg-max-width: 1152px;
  --inner-lg-max-width: 960px;
}