/* css/variables.css */
:root {
    /* Text Colors */
    --color-text-strong: #111111;
    --color-text-lead: #2B2B2B;
    --color-text-default: #333333;
    --color-text-calm: #454545;
    --color-text-muted: #666666;
    --color-text-primary: var(--color-text-strong);
    --color-text-secondary: var(--color-text-muted);
    --color-placeholder: #BBBBBB;
    --color-white: #FFFFFF;

    /* Brand Colors */
    --color-brand-primary: #2E4060;
    --color-brand-deep: #233047;

    /* Accent Colors */
    --color-accent-red: #AF2B19;
    --color-accent-yellow: #FCC700;
    --color-accent-pink: #DD8C96;

    /* Paper Colors */
    --color-paper-cream: #FFFAF4;
    --color-paper-sand: #F2E9DE;
    --color-paper-base: #FAF0E4;
    --color-paper-oat: #FAF5EF;
    --color-paper-soft: #F5EDE2;
    --color-paper-warm: #EADBC6;
    --color-paper-ivory: #FFF9F2;
    --color-paper-shadow: #E3D0B7;
    --color-paper-folder: #CEAE84;
    --color-paper-note: #EFE8E0;
    --color-paper-white: #FFFDF8;

    /* Line Colors */
    --color-line-brown: #675A49;
    --color-line-form: #C3BAAF;
    --color-line-form-active: #5C5245;

    /* UI Colors */
    --color-scroll-thumb: #D9D9D9;

    /* Transparent Colors */
    --color-tab-bg-active: var(--color-brand-primary);
    --color-tab-text-active: var(--color-white);
    --color-tab-bg-hover: rgba(252, 199, 0, 0.5);
    --color-tab-text-hover: var(--color-brand-primary);
    --color-tab-bg-inactive: rgba(252, 199, 0, 0.3);
    --color-tab-text-inactive: rgba(46, 64, 96, 0.72);
    --color-tab-line: rgba(46, 64, 96, 0.72);
    --color-highlight-yellow: rgba(252, 199, 0, 0.45);
    --color-tape-soft: rgba(220, 210, 190, 0.6);
    --color-tape-default: rgba(227, 208, 183, 0.72);
    --color-tape-strong: rgba(227, 208, 183, 0.8);
    --color-line-brown-soft: rgba(103, 90, 73, 0.35);
    --color-line-brown-text: rgba(103, 90, 73, 0.65);
    --color-line-blue-soft: rgba(46, 64, 96, 0.5);
    --color-button-blue-soft: rgba(46, 64, 96, 0.48);
    --color-button-pink-hover: rgba(221, 140, 150, 0.8);
    --color-red-soft: rgba(175, 43, 25, 0.48);
    --color-red-strong: rgba(175, 43, 25, 0.68);
    --color-scroll-track: rgba(217, 217, 217, 0.3);
    --color-placeholder-active: rgba(187, 187, 187, 0.4);

    /* Typography Scale */
    /* Font Size */
    --font-size-section-title: 3.2rem;    /* 섹션 제목 */
    --font-size-section-title-lg: 4rem;   /* 섹션 큰 제목 */  
    --font-size-panel-title: 2.4rem;      /* 패널/카드 큰 제목 */
    --font-size-content-title: 1.8rem;    /* 콘텐츠 소제목 */
    --font-size-body-large: 1.8rem;       /* 큰 본문/주요설명 */
    --font-size-body: 1.6rem;             /* 본문 */
    --font-size-body-small: 1.4rem;       /* 보조 본문 */
    --font-size-mobile-nav: 1.8rem;       /* 모바일 메뉴 제목 */
    --font-size-button: 1.6rem;           /* 버튼/내비/탭 */
    --font-size-label: 1.2rem;            /* 라벨/태그 */
    --font-size-caption: 1.2rem;          /* 캡션/작은 정보 */
    --font-size-micro: 1rem;

    --font-size-visual-title: 10rem;      /* 비주얼영역 제목 */
    --font-size-visual-copy-en: 3rem;     /* 비주얼영역 영어 카피 */
    --font-size-visual-copy-ko: 2.2rem;   /* 비주얼영역 한글 카피 */

    --font-size-profile-tab: 1.4rem;      /* 프로필 탭 */

    --font-size-project-label: 2.4rem;          /* 프로젝트 소제목 라벨 */
    --font-size-project-tab-title: 2rem;        /* 프로젝트 탭 */
    --font-size-project-tab-number: 2.6rem;     /* 프로젝트 탭 숫자 */
    --font-size-project-panel-title: 2.8rem;    /* 프로젝트 작품 제목 */

    --font-size-footer-title: 5rem;       /* 푸터 제목 */
    --font-size-footer-desc: 3.2rem;      /* 푸터 설명 */

    /* Font Weight */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;

    /* Line Height */
    --line-height-title: 1.2;
    --line-height-heading: 1.35;
    --line-height-body: 1.7;
    --line-height-small: 1.55;
    --line-height-label: 1.2;

    /* Letter Spacing */
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-label: 0.04em;
    --letter-spacing-title: 0.05em;

    /* Font Family */
    --font-label: 'Graduate', serif;
    --font-sans: 'Pretendard', sans-serif;
    --font-typewriter: 'X Typewriter', monospace;
    --font-script: 'X Typewriter', monospace;
    --font-display-ko: 'UNPEOPLE Gothic KS', sans-serif;

    /* Layout */
    --inner-width: 1200px;
    --section-padding-pc: 120px;
    --section-padding-tablet: 90px;
    --section-padding-mobile: 64px;

    /* Z Index */
    --z-background: 1;
    --z-object: 2;
    --z-paper: 3;
    --z-decoration: 4;
    --z-content: 5;
    --z-header: 10;
}