Design System

/* ===== picks design — Design System ===== */

/* --- Main Color --- */
--main-gradient: linear-gradient(135deg, #FF34A9, #039EF5);
--main-gradient-light: linear-gradient(135deg, #FFC8E2, #A8D9FC);
--main-pink: #FF34A9;
--main-blue: #039EF5;
--main-dark: #22232B;
--main-base-gray: #ABB8C3;
--main-base-light: #F4F7F9;

/* --- Grayscale --- */
--gray-white: #FFFFFF;
--gray-50: #FAFAFA;
--gray-100: #F2F2F2;
--gray-200: #E6E6E6;
--gray-300: #D8D8D8;
--gray-400: #B3B3B3;
--gray-500: #999999;
--gray-600: #808080;
--gray-700: #676767;
--gray-800: #404040;
--gray-900: #000000;

/* --- Colors: Pink --- */
--pink-50: #FFF3FA;
--pink-100: #FFC8E2;
--pink-200: #FF8DC4;
--pink-500: #FF34A9;
--pink-700: #CC1A85;
--pink-900: #800F54;

/* --- Colors: Orange --- */
--orange-50: #FFF3EF;
--orange-100: #FFCBBA;
--orange-200: #FFA182;
--orange-500: #FF764D;
--orange-700: #CC5530;
--orange-900: #803318;

/* --- Colors: Yellow --- */
--yellow-50: #FFFDE6;
--yellow-100: #FFF6A3;
--yellow-200: #FFF060;
--yellow-500: #FFE900;
--yellow-700: #CCB900;
--yellow-900: #806F00;

/* --- Colors: Lime --- */
--lime-50: #EEFDF5;
--lime-100: #B5F6D7;
--lime-200: #7EF1BA;
--lime-500: #49EDA7;
--lime-700: #28B87A;
--lime-900: #15734C;

/* --- Colors: Green --- */
--green-50: #ECFBFD;
--green-100: #ADF0F6;
--green-200: #70E3ED;
--green-500: #1DD4E3;
--green-700: #10A3B2;
--green-900: #086670;

/* --- Colors: Blue --- */
--blue-50: #ECF6FE;
--blue-100: #A8D9FC;
--blue-200: #60BAF8;
--blue-500: #039EF5;
--blue-700: #0274B8;
--blue-900: #014A75;

/* --- Colors: Purple --- */
--purple-50: #F3EEFB;
--purple-100: #CDBDEF;
--purple-200: #A78DE2;
--purple-500: #7B5ADC;
--purple-700: #5A3CA8;
--purple-900: #382368;

/* --- Colors: Dark --- */
--dark: #22232B;

/* --- Gradation: Pink → Blue --- */
--grad-pink-blue-50: linear-gradient(135deg, #FFF3FA, #ECF6FE);
--grad-pink-blue-100: linear-gradient(135deg, #FFC8E2, #A8D9FC);
--grad-pink-blue-200: linear-gradient(135deg, #FF8DC4, #60BAF8);
--grad-pink-blue-500: linear-gradient(135deg, #FF34A9, #039EF5);

/* --- Gradation: All Patterns (500 Base) --- */
--grad-pink-purple: linear-gradient(135deg, #FF34A9, #7B5ADC);
--grad-pink-orange: linear-gradient(135deg, #FF34A9, #FF764D);
--grad-orange-yellow: linear-gradient(135deg, #FF764D, #FFE900);
--grad-yellow-lime: linear-gradient(135deg, #FFE900, #49EDA7);
--grad-lime-green: linear-gradient(135deg, #49EDA7, #1DD4E3);
--grad-green-blue: linear-gradient(135deg, #1DD4E3, #039EF5);
--grad-blue-purple: linear-gradient(135deg, #039EF5, #7B5ADC);
--grad-blue-lime: linear-gradient(135deg, #039EF5, #49EDA7);
--grad-purple-green: linear-gradient(135deg, #7B5ADC, #1DD4E3);
--grad-purple-pink: linear-gradient(135deg, #7B5ADC, #FF34A9);
--grad-yellow-blue: linear-gradient(135deg, #FFE900, #039EF5);
--grad-pink-green: linear-gradient(135deg, #FF34A9, #1DD4E3);

/* --- Text Color (on Light) --- */
--text-heading: #22232B;  /* Dark */
--text-body: #404040;     /* Grayscale 0007 */
--text-sub: #8A8A8A;      /* サイト実装準拠 */
--text-placeholder: #999999; /* Grayscale 0005 */

/* --- Text Color (on Dark) --- */
--text-heading-inv: #FFFFFF; /* Grayscale 0000 */
--text-body-inv: #D8D8D8;    /* Grayscale 0004 */
--text-sub-inv: #8A8A8A;     /* サイト実装準拠 */
--text-placeholder-inv: #676767; /* Grayscale 0006 */

/* --- Link & Accent --- */
--text-link: #039EF5;     /* Blue 500 */
--text-link-hover: #0274B8; /* Blue 700 */
--text-accent: #FF34A9;   /* Pink 500 */

/* --- System Status --- */
--color-error: #E04545;
--color-error-bg: #FEF0EF;
--color-success: #28B87A;  /* Lime 700 */
--color-success-bg: #EEFDF5;  /* Lime 50 */

/* --- Typography --- */
--font-jp: 'Noto Sans JP', sans-serif;
--font-en: 'Readex Pro', sans-serif;
--text-3xl: 48px;  /* Bold 700 / LH: 72px / LS: 2.4px */
--text-2xl: 40px;  /* Bold 700 / LH: 60px / LS: 2px */
--text-xl: 32px;   /* Bold 700 / LH: 48px / LS: 1.6px */
--text-lg: 24px;   /* Bold 700 / LH: 36px / LS: 1.2px */
--text-md: 20px;   /* Bold 700 / LH: 32px / LS: 1px */
--text-base: 18px; /* Bold 700 / LH: 24px / LS: 0.9px */
--text-sm: 16px;   /* Regular 400 / LH: 28px / LS: 0.8px */
--text-xs: 14px;   /* Regular 400 / LH: 24px / LS: 0.7px */