@charset "UTF-8";

:root {
    /* 基本色 */
    --color-white: #ffffff;
    --color-base-gray: 41, 46, 61;
    --color-opacity-gray900: rgba(var(--color-base-gray), 0.9);
    --color-opacity-gray800: rgba(var(--color-base-gray), 0.8);
    --color-opacity-gray700: rgba(var(--color-base-gray), 0.7);
    --color-opacity-gray600: rgba(var(--color-base-gray), 0.6);
    --color-opacity-gray500: rgba(var(--color-base-gray), 0.5);
    --color-opacity-gray400: rgba(var(--color-base-gray), 0.4);
    --color-opacity-gray300: rgba(var(--color-base-gray), 0.3);
    --color-opacity-gray200: rgba(var(--color-base-gray), 0.2);
    --color-opacity-gray150: rgba(var(--color-base-gray), 0.15);
    --color-opacity-gray100: rgba(var(--color-base-gray), 0.1);
    --color-opacity-gray50: rgba(var(--color-base-gray), 0.05);
    --color-opacity-gray25: rgba(var(--color-base-gray), 0.025);
    --color-solid-gray900: #3e4350;
    --color-solid-gray800: #545864;
    --color-solid-gray700: #696d77;
    --color-solid-gray600: #7f828b;
    --color-solid-gray500: #94969e;
    --color-solid-gray400: #a9abb1;
    --color-solid-gray300: #bfc0c5;
    --color-solid-gray200: #d4d5d8;
    --color-solid-gray150: #dfe0e2;
    --color-solid-gray100: #eaeaec;
    --color-solid-gray50: #f4f5f5;
    --color-solid-gray25: #fafafa;

    /* 4thValley ブランドカラー - ティール/エメラルドグリーン */
    --color-primary900: #0d3d38;
    --color-primary800: #115e56;
    --color-primary700: #158078;
    --color-primary600: #1a9d93;
    --color-primary500: #20b2aa;
    --color-primary400: #4dc4be;
    --color-primary300: #7ad6d1;
    --color-primary200: #a7e8e5;
    --color-primary150: #c3f0ee;
    --color-primary100: #dff8f6;
    --color-primary50: #effbfa;
    --color-primary25: #f7fdfc;

    /* ブルー */
    --color-blue900: #001650;
    --color-blue800: #001f73;
    --color-blue700: #002ba0;
    --color-blue600: #0035c3;
    --color-blue500: #003ee5;
    --color-blue400: #4d78ed;
    --color-blue300: #99b2f5;
    --color-blue200: #ccd8fa;
    --color-blue150: #d9e2fb;
    --color-blue100: #e5ecfc;
    --color-blue50: #f2f5fe;
    --color-blue25: #f9fafe;

    --color-red900: #620000;
    --color-red800: #850000;
    --color-red700: #a90000;
    --color-red600: #ce0000;
    --color-red500: #ec0000;
    --color-red400: #fa0000;
    --color-red300: #ff5454;
    --color-red200: #ff7171;
    --color-red150: #ff9696;
    --color-red100: #ffbbbb;
    --color-red50: #ffdada;
    --color-red25: #fdeeee;

    /* ライトグレー */
    --color-light-gray-primary: #f0f4f9;
    --color-light-gray-secondary: #ebeff4;
    --color-light-gray-tertiary: #f8fafd;

    /* アクセント色 */
    --color-success: #2cac6e;
    --color-success-light: #e6f5ec;
    --color-alert: var(--color-red500);
    --color-alert-light: var(--color-red50);
    --color-focus: #f2b705;
    --color-focus-light: #fff5d4;

    --font-family-sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --font-family-mono: "Noto Sans Mono", monospace;

    --text-primary: var(--color-solid-gray900);
    --icon-primary: var(--color-solid-gray800);

    --background-primary: var(--color-white);
}