/*
Theme Name: goldkids
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/


:root {
    /* ==================================================
     BASE
  ================================================== */
    --white: #ffffff;
    --white-rgb: 255, 255, 255;

    --black: #000000;
    --black-rgb: 0, 0, 0;

    /* ==================================================
     PRIMARY PALETTE
     50 = nhạt nhất, 500 = màu chính, 950 = đậm nhất
  ================================================== */
    --primary-50: #fff9eb;
    --primary-100: #fff0c6;
    --primary-200: #ffe18a;
    --primary-300: #ffcd4d;
    --primary-400: #ffb820;
    --primary-500: #ffa733;
    --primary-600: #e88b00;
    --primary-700: #bf6800;
    --primary-800: #984f06;
    --primary-900: #7c410b;
    --primary-950: #482100;

    --primary-50-rgb: 255, 249, 235;
    --primary-100-rgb: 255, 240, 198;
    --primary-200-rgb: 255, 225, 138;
    --primary-300-rgb: 255, 205, 77;
    --primary-400-rgb: 255, 184, 32;
    --primary-500-rgb: 255, 167, 51;
    --primary-600-rgb: 232, 139, 0;
    --primary-700-rgb: 191, 104, 0;
    --primary-800-rgb: 152, 79, 6;
    --primary-900-rgb: 124, 65, 11;
    --primary-950-rgb: 72, 33, 0;

    /* ==================================================
     PRIMARY SEMANTIC
  ================================================== */
    --primary: var(--primary-500);
    --primary-rgb: var(--primary-500-rgb);
    --primary-on: var(--text);

    --primary-hover: var(--primary-600);
    --primary-hover-rgb: var(--primary-600-rgb);

    --primary-active: var(--primary-700);
    --primary-active-rgb: var(--primary-700-rgb);

    --primary-dark: var(--primary-900);
    --primary-dark-rgb: var(--primary-900-rgb);

    --primary-on-dark: var(--primary-200);

    /* ==================================================
     ACCENT PALETTE — BRAND BLUE
     Dùng cho CTA phụ, link, badge và thành phần hỗ trợ
  ================================================== */
    --accent-50: #eff8ff;
    --accent-100: #d9eeff;
    --accent-200: #bce2ff;
    --accent-300: #8ed2ff;
    --accent-400: #58b8ff;
    --accent-500: #329af0;
    --accent-600: #147bd1;
    --accent-700: #1162aa;
    --accent-800: #14538a;
    --accent-900: #174772;
    --accent-950: #0f2d4a;

    --accent-50-rgb: 239, 248, 255;
    --accent-100-rgb: 217, 238, 255;
    --accent-200-rgb: 188, 226, 255;
    --accent-300-rgb: 142, 210, 255;
    --accent-400-rgb: 88, 184, 255;
    --accent-500-rgb: 50, 154, 240;
    --accent-600-rgb: 20, 123, 209;
    --accent-700-rgb: 17, 98, 170;
    --accent-800-rgb: 20, 83, 138;
    --accent-900-rgb: 23, 71, 114;
    --accent-950-rgb: 15, 45, 74;

    /* ==================================================
     ACCENT SEMANTIC
  ================================================== */
    --accent: var(--accent-500);
    --accent-rgb: var(--accent-500-rgb);

    --accent-hover: var(--accent-600);
    --accent-hover-rgb: var(--accent-600-rgb);

    --accent-active: var(--accent-700);
    --accent-active-rgb: var(--accent-700-rgb);

    --accent-soft: var(--accent-50);
    --accent-border: var(--accent-200);

    --accent-on: var(--white);
    --accent-on-dark: var(--accent-200);

    /* ==================================================
     TEXT PALETTE
     Trung tính hơi nghiêng xanh để phù hợp nhận diện
  ================================================== */
    --text: #1d2939;
    --text-rgb: 29, 41, 57;

    --text-soft: #344054;
    --text-soft-rgb: 52, 64, 84;

    --text-muted: #667085;
    --text-muted-rgb: 102, 112, 133;

    --text-light: #98a2b3;
    --text-light-rgb: 152, 162, 179;

    /* ==================================================
     BACKGROUND PALETTE
     Các cấp độ nền dùng trong cùng một UI
     Không phải light mode / dark mode
  ================================================== */
    --bg-dark: #1d2939;
    --bg-dark-rgb: 29, 41, 57;

    --bg-light: #fffbf2;
    --bg-light-rgb: 255, 251, 242;

    --bg-soft: #f2f4f7;
    --bg-soft-rgb: 242, 244, 247;

    --bg-accent-soft: #eff8ff;
    --bg-accent-soft-rgb: 239, 248, 255;

    /* ==================================================
     ON DARK TOKENS
     Dùng cho block có nền đậm như footer/hero/CTA
     Đây không phải dark mode
  ================================================== */
    --on-dark-text: var(--white);
    --on-dark-text-soft: rgba(var(--white-rgb), 0.88);
    --on-dark-text-ui: rgba(var(--white-rgb), 0.84);
    --on-dark-text-sub: rgba(var(--white-rgb), 0.78);
    --on-dark-text-muted: rgba(var(--white-rgb), 0.68);
    --on-dark-text-disabled: rgba(var(--white-rgb), 0.42);

    --on-dark-surface: rgba(var(--white-rgb), 0.09);
    --on-dark-surface-hover: rgba(var(--white-rgb), 0.15);

    --on-dark-border: rgba(var(--white-rgb), 0.14);
    --on-dark-border-soft: rgba(var(--white-rgb), 0.1);
    --on-dark-border-strong: rgba(var(--white-rgb), 0.28);

    --on-dark-primary: var(--primary-300);
    --on-dark-primary-hover: var(--primary-200);

    --on-dark-accent: var(--accent-200);
    --on-dark-accent-hover: var(--accent-100);

    /* ==================================================
     BORDER BASE
  ================================================== */
    --border: #eaecf0;
    --border-strong: #d0d5dd;

    --border-primary: var(--primary-200);
    --border-accent: var(--accent-200);

    /* ==================================================
     SEMANTIC STATE
     Không thay các trạng thái hệ thống bằng màu thương hiệu
  ================================================== */
    --success: #16a34a;
    --success-rgb: 22, 163, 74;

    --warning: #f59e0b;
    --warning-rgb: 245, 158, 11;

    --danger: #dc2626;
    --danger-rgb: 220, 38, 38;

    --info: #2563eb;
    --info-rgb: 37, 99, 235;

    /* ==================================================
     DISABLED BASE
  ================================================== */
    --disabled-bg: var(--bg-soft);
    --disabled-text: var(--text-light);
    --disabled-border: var(--border);

    /* ==================================================
     FOCUS BASE
  ================================================== */
    --focus-ring: rgba(var(--primary-rgb), 0.22);
    --focus-ring-accent: rgba(var(--accent-rgb), 0.22);

    /* ==================================================
     SHADOW BASE
  ================================================== */
    --shadow-soft: 0 18px 45px rgba(var(--primary-rgb), 0.09);

    --shadow-card: 0 4px 16px rgba(16, 24, 40, 0.08);

    --shadow-strong: 0 24px 70px rgba(var(--primary-dark-rgb), 0.17);

    --shadow-accent: 0 16px 34px rgba(var(--accent-rgb), 0.16);

    /* ==================================================
     RADIUS
  ================================================== */
    --radius-none: 0;
    --radius-sm: 2px;
    --radius-default: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-3xl: 24px;
    --radius-full: 9999px;

    /* ==================================================
     TRANSITION
  ================================================== */
    --transition-fast: 180ms ease;
    --transition-ui: 300ms ease;
    --transition-slow: 700ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ==================================================
     FONT
  ================================================== */
    --font-display: "Be Vietnam Pro", Arial, sans-serif;

    /* ==================================================
     UI TOKENS
     Token mặc định cho toàn bộ giao diện
     Không phải light mode / dark mode
     Component nên ưu tiên dùng nhóm này
  ================================================== */
    --page-bg: var(--bg-soft);

    --section-bg: var(--bg-soft);
    --section-bg-brand: var(--primary-50);
    --section-bg-accent: var(--accent-50);

    --surface-bg: var(--white);
    --surface-bg-soft: var(--bg-light);
    --surface-bg-muted: var(--bg-soft);
    --surface-bg-accent: var(--bg-accent-soft);

    --text-main: var(--text);
    --text-heading: var(--accent-950);
    --text-heading-primary: var(--primary-700);
    --text-heading-accent: var(--accent-700);
    --text-sub: var(--text-muted);
    --text-soft-ui: var(--text-soft);
    --text-disabled: var(--text-light);

    --border-ui: var(--border);
    --border-ui-strong: var(--border-strong);

    /* Link nội dung sử dụng xanh để phân biệt với CTA cam */
    --link-color: var(--accent);
    --link-hover: var(--accent-hover);

    /* Nút chính: màu cam vàng thương hiệu */
    --button-primary-bg: var(--primary);
    --button-primary-text: var(--primary-on);
    --button-primary-hover-bg: var(--primary-hover);
    --button-primary-active-bg: var(--primary-active);

    /* Nút phụ: màu xanh thương hiệu */
    --button-accent-bg: var(--accent);
    --button-accent-text: var(--accent-on);
    --button-accent-hover-bg: var(--accent-hover);
    --button-accent-active-bg: var(--accent-active);

    /* Nút outline */
    --button-outline-bg: transparent;
    --button-outline-text: var(--accent);
    --button-outline-border: var(--accent);
    --button-outline-hover-bg: var(--accent-50);
    --button-outline-hover-text: var(--accent-hover);

    /* Badge cam: ưu đãi, nổi bật, bán chạy */
    --badge-primary-bg: var(--primary-50);
    --badge-primary-text: var(--primary-700);
    --badge-primary-border: var(--primary-200);

    /* Badge xanh: thông tin, danh mục, hướng dẫn */
    --badge-accent-bg: var(--accent-soft);
    --badge-accent-text: var(--accent-800);
    --badge-accent-border: var(--accent-border);

    /* Giá và khuyến mãi */
    --price-color: var(--primary);
    --price-old-color: var(--text-muted);
    --sale-bg: var(--primary);
    --sale-text: var(--white);

    /* Input */
    --input-bg: var(--surface-bg);
    --input-text: var(--text-main);
    --input-border: var(--border-ui-strong);
    --input-focus-border: var(--accent);
    --input-placeholder: var(--text-sub);

    --focus-ring-ui: var(--focus-ring-accent);

    --shadow-ui-soft: var(--shadow-soft);
    --shadow-ui-card: var(--shadow-card);
    --shadow-ui-strong: var(--shadow-strong);
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--page-bg) !important;
    font-family: "Be Vietnam Pro", sans-serif !important;
}