@charset "utf-8";

/*
 * File    : var.css
 * Author  : STUDIO-JT
 *
 * SUMMARY :
 * COLOR
 * LAYOUT
 * TYPOGRAPHY
 */



:root {
    /* COLOR */
    --color-white: #fff;
    --color-black: #000;

    --color-gray-100: #f7f7f7;
    --color-gray-200: #eee;
    --color-gray-300: #ddd;
    --color-gray-400: #bababa;
    --color-gray-500: #a5a5a5;
    --color-gray-600: #878787;
    --color-gray-700: #666;
    --color-gray-800: #393939;
    --color-gray-900: #191919;

    --color-primary: #8b5e3c;

    --color-brown-100: #2a180d;
    --color-brown-200: #3a2415;
    --color-brown-400: #dcba80;
    --color-brown-500: #f5ede0;

    --color-bg-100: #fcfbf7;
    --color-bg-200: #fdf6ee;

    --color-text-on-dark-muted: rgba(255, 255, 255, .8);
    --color-overlay-hero: rgba(0, 0, 0, .3);
    --color-overlay-dialog: rgba(0, 0, 0, .5);

    --color-graph-low: #6bae8a;
    --color-graph-moderate: #dc9843;
    --color-graph-high: #c94e47;

    --color-accent-100: #ed481f; /* Gradient 1: 레드오렌지 */
    --color-accent-200: #ec717f; /* Gradient 1: 코랄 */
    --color-accent-300: #f5ed47; /* Gradient 3: 옐로 */
    --color-accent-400: #f580d9; /* Gradient 3: 핑크 */
    --color-accent-500: #ff5208; /* Gradient 2: 오렌지 */
    --color-accent-600: #f2e993; /* Gradient 2: 옅은 옐로 */

    /* LAYOUT */
    --layout-content-width: 1440rem;
    --layout-gutter: 40rem;
    --space-section-mobile: 120rem;

    /* TYPOGRAPHY */
    --font-primary: 'PretendardStd', sans-serif;
    --font-secondary: 'PlayfairDisplay', serif;

    --letter-spacing-01: 0em;
    --letter-spacing-02: -0.01em;
    /* 세리프(제목) 자간: 영문 0, 한국어판은 jt-strap.css 가 -1% 로 덮는다 */
    --letter-spacing-secondary: 0em;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    --font-size-primary-01: 30rem;
    --font-size-primary-02: 24rem;
    --font-size-primary-03: 21rem;
    --font-size-primary-04: 18rem;
    --font-size-primary-05: 16rem;
    --font-size-primary-06: 14rem;
    --font-size-primary-07: 13rem;
    --font-size-primary-08: 12rem;

    --font-size-secondary-01: 64rem;
    --font-size-secondary-02: 56rem;
    --font-size-secondary-03: 48rem;
    --font-size-secondary-04: 42rem;

    --font-lineheight-primary-01: 1.2;
    --font-lineheight-primary-02: 1.2;
    --font-lineheight-primary-03: 1.3;
    --font-lineheight-primary-04: 1.4;
    --font-lineheight-primary-05: 1.4;
    --font-lineheight-primary-06: 1.3;
    --font-lineheight-primary-07: 1.2;
    --font-lineheight-primary-08: 1.2;

    --font-lineheight-secondary-01: 1.1;
    --font-lineheight-secondary-02: 1.1;
    --font-lineheight-secondary-03: 1.1;
    --font-lineheight-secondary-04: 1.1;
}