/*
Theme Name: Flatsome Child
Theme URI: https://accbaohanh.com
Description: accbaohanh.com storefront child theme built on Flatsome and WooCommerce.
Author: accbaohanh.com
Author URI: https://accbaohanh.com
Template: flatsome
Version: 1.1.0
Text Domain: flatsome-child
*/

/*
 * Design tokens. Every component stylesheet in assets/css/ reads these.
 * Contrast notes are against --c-surface (#fff) unless stated.
 */
:root {
  /* Brand */
  --c-primary: #0866d0;          /* 5.3:1 — links, primary buttons, nav bar */
  --c-primary-hover: #0757b4;
  --c-primary-soft: #eff6ff;     /* tinted backgrounds */
  --c-primary-line: #bfdbfe;     /* borders on tinted backgrounds */

  /* Ink & surfaces */
  --c-ink: #0f172a;              /* headings */
  --c-text: #334155;             /* body copy */
  --c-muted: #64748b;            /* meta, captions (4.8:1) */
  --c-line: #e2e8f0;
  --c-line-strong: #cbd5e1;
  --c-surface: #ffffff;
  --c-subtle: #f8fafc;
  --c-page: #f3f5f9;             /* page background */

  /* Commerce semantics */
  --c-price: #d32f2f;            /* current price (5.0:1) */
  --c-price-old: #64748b;        /* struck-through price */
  --c-hot: #dc2626;              /* flash sale accent, sale badges */
  --c-hot-soft: #fef2f2;
  --c-success: #15803d;
  --c-success-soft: #f0fdf4;
  --c-danger: #b91c1c;
  --c-danger-soft: #fef2f2;
  --c-warn: #b45309;
  --c-warn-soft: #fffbeb;

  /* Type */
  --font-body: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-heading: "Montserrat", "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;
  --lh-tight: 1.25;
  --lh-body: 1.6;

  /* Shape & depth */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  --sh-2: 0 10px 24px -8px rgba(15, 23, 42, 0.14), 0 2px 6px -2px rgba(15, 23, 42, 0.06);

  /* Spacing (4px grid) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  --container: 1250px;

  /* Flatsome's own variables, mapped onto the tokens above */
  --primary-color: var(--c-primary);
  --fs-color-primary: var(--c-primary);
  --fs-color-secondary: var(--c-primary-hover);
  --fs-color-success: var(--c-success);
  --fs-color-alert: var(--c-danger);
  --fs-experimental-link-color: var(--c-primary);
  --fs-experimental-link-color-hover: var(--c-primary-hover);
}