/* ==========================================================================
   InstaShop design tokens — single source of truth
   --------------------------------------------------------------------------
   Every value here is copied 1:1 from the stylesheets that used it before, so
   this file changes no pixel. It only gives each value a name, so a change
   happens once instead of in 20 places.

   Load order (see template/common/header.twig):
     tokens.css  ->  compat.css  ->  instashop.css  ->  design.css  ->  ...
     ->  index.php?route=extension/module/instashop_feed/colors  (runtime palette)

   The runtime palette route declares the same --ig-* colour names on :root and
   loads last, so a merchant's saved palette still wins. Never hard-code a
   colour that a merchant can customise.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Palette primitives
   Defaults for the fields exposed in apanel/instagram_theme.php.
   The panel writes these through extension/module/instashop_feed/colors.
   -------------------------------------------------------------------------- */
:root {
  --ig-primary: #203c33;
  --ig-background: #f8f9f5;
  --ig-surface: #ffffff;
  --ig-text: #203c33;
  --ig-accent: #dbf19c;
  --ig-highlight: #fa8c70;
  --ig-border: #e5e8de;
  --ig-hero: #eaf0dd;
  --ig-button: #922d3d;
  --ig-price: #f21c60;
}

/* --------------------------------------------------------------------------
   2. Radius scale — 1:1 with the literals the theme already uses
   The theme currently ships 21 distinct radii. They are all defined here so
   Phase 2 can collapse them onto one small scale (see AUDIT-AR.md) after a
   visual review, without hunting through 14 stylesheets.
   -------------------------------------------------------------------------- */
:root {
  --ig-radius-5: 5px;
  --ig-radius-6: 6px;
  --ig-radius-7: 7px;
  --ig-radius-8: 8px;
  --ig-radius-9: 9px;
  --ig-radius-10: 10px;
  --ig-radius-11: 11px;
  --ig-radius-12: 12px;
  --ig-radius-13: 13px;
  --ig-radius-14: 14px;
  --ig-radius-15: 15px;
  --ig-radius-16: 16px;
  --ig-radius-17: 17px;
  --ig-radius-18: 18px;
  --ig-radius-19: 19px;
  --ig-radius-20: 20px;
  --ig-radius-22: 22px;
  --ig-radius-24: 24px;
  --ig-radius-26: 26px;
  --ig-radius-30: 30px;
  --ig-radius-50: 50px;
}

/* --------------------------------------------------------------------------
   3. Shadows that were duplicated verbatim in more than one stylesheet
   One-off shadows stay inline on purpose: naming a value used once adds
   indirection without removing a duplication.
   -------------------------------------------------------------------------- */
:root {
  --ig-shadow-soft: 0 3px 16px #00000012;
  --ig-shadow-ring-primary: 0 0 0 1px var(--ig-primary);
  --ig-shadow-ring-soft: 0 0 0 3px var(--ig-soft);
}

/* --------------------------------------------------------------------------
   4. Reference only — values the theme uses but that are not tokenised yet.
   Kept as documentation so the next change starts from facts:
     layering : 1025, 1030, 1035, 1040, 1050, 1060, 1100, 9999
     motion   : .15s, .2s, .25s, .3s, .4s, .5s, .6s
     fonts    : 'Cairo' (Arabic UI), 'DM Sans' (latin UI), ui-monospace (codes)
   -------------------------------------------------------------------------- */