/*
 * 57hours Design Tokens
 *
 * Source of truth: /Downloads/System1/design-system/tokens/tokens.source.json
 * (57hours Figma UI kit export)
 *
 * Two naming layers:
 *   1. Canonical short names  — use in handwritten CSS:  var(--border)
 *   2. Figma Dev Mode aliases — copy-paste from Figma:   var(--shadcn-colors-general-border)
 *
 * Figma alias naming rule:
 *   Full variable path → lowercase, spaces/slashes → hyphens
 *   e.g. "shadcn colors/general/border" → --shadcn-colors-general-border
 *
 * Loaded on WooCommerce flow pages only (product, checkout, order-received, order-pay).
 * See inc/scripts-styles.php  →  f7h-design-tokens
 */

:root {

  /* ── Border radius ─────────────────────────────────────────────────────── */
  /* Figma collection: "border radii" — variable names are the same in Figma */
  --radius-none: 0;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-xl:   16px;
  --radius-2xl:  18px;
  --radius-3xl:  22px;
  --radius-4xl:  26px;
  --radius-full: 9999px;
  --radius: var(--radius-lg);

  /* ── Canonical color tokens ────────────────────────────────────────────── */
  /* Figma collection: "shadcn colors", mode: "shadcn"                       */
  --background:           #ffffff;
  --foreground:           #000000;
  --brand:                #d82137;
  --brand-foreground:     #ffffff;
  --primary:              #0a0a0a;
  --primary-foreground:   #ffffff;
  --secondary:            #f5f5f5;
  --secondary-foreground: #171717;
  --accent:               #f5f5f5;
  --accent-foreground:    #000000;
  --muted:                #f5f5f5;
  --muted-foreground:     #737373;
  --destructive:          #dc2626;
  --destructive-muted:    #fef2f2;
  --border:               #e5e5e5;
  --input:                #e5e5e5;
  --card:                 #ffffff;
  --card-foreground:      #0a0a0a;
  --popover:              #ffffff;
  --popover-foreground:   #0a0a0a;

  /* status */
  --success:              #15803d;
  --success-foreground:   #ffffff;
  --success-muted:        #f0fdf4;
  --warning:              #b45309;
  --warning-foreground:   #ffffff;
  --warning-muted:        #fffbeb;
  --info:                 #0369a1;
  --info-foreground:      #ffffff;
  --info-muted:           #f0f9ff;

  /* focus */
  --ring:                 #d4d4d4;
  --ring-error:           #fecaca;

  /* ── Canonical shadow tokens ───────────────────────────────────────────── */
  --shadow-2xs: 0 1px 0 0 rgba(0,0,0,.05);
  --shadow-xs:  0 1px 2px 0 rgba(0,0,0,.05);
  --shadow-sm:  0 1px 3px 0 rgba(0,0,0,.10), 0 1px 2px -1px rgba(0,0,0,.10);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -2px rgba(0,0,0,.10);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -4px rgba(0,0,0,.10);
  --shadow-xl:  0 20px 25px -5px rgba(0,0,0,.10), 0 8px 10px -6px rgba(0,0,0,.10);
  --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,.25);

  /* ── Figma Dev Mode color aliases ──────────────────────────────────────── */
  /* These mirror the CSS Figma Dev Mode generates when you copy a property. */
  /* "shadcn colors/general/border" → --shadcn-colors-general-border         */
  --shadcn-colors-general-background:           var(--background);
  --shadcn-colors-general-foreground:           var(--foreground);
  --shadcn-colors-general-brand:                var(--brand);
  --shadcn-colors-general-brand-foreground:     var(--brand-foreground);
  --shadcn-colors-general-primary:              var(--primary);
  --shadcn-colors-general-primary-foreground:   var(--primary-foreground);
  --shadcn-colors-general-secondary:            var(--secondary);
  --shadcn-colors-general-secondary-foreground: var(--secondary-foreground);
  --shadcn-colors-general-accent:               var(--accent);
  --shadcn-colors-general-accent-foreground:    var(--accent-foreground);
  --shadcn-colors-general-muted:                var(--muted);
  --shadcn-colors-general-muted-foreground:     var(--muted-foreground);
  --shadcn-colors-general-destructive:          var(--destructive);
  --shadcn-colors-general-destructive-muted:    var(--destructive-muted);
  --shadcn-colors-general-border:               var(--border);
  --shadcn-colors-general-input:                var(--input);
  --shadcn-colors-general-card:                 var(--card);
  --shadcn-colors-general-card-foreground:      var(--card-foreground);
  --shadcn-colors-general-popover:              var(--popover);
  --shadcn-colors-general-popover-foreground:   var(--popover-foreground);
  --shadcn-colors-status-success:               var(--success);
  --shadcn-colors-status-success-foreground:    var(--success-foreground);
  --shadcn-colors-status-success-muted:         var(--success-muted);
  --shadcn-colors-status-warning:               var(--warning);
  --shadcn-colors-status-warning-foreground:    var(--warning-foreground);
  --shadcn-colors-status-warning-muted:         var(--warning-muted);
  --shadcn-colors-status-info:                  var(--info);
  --shadcn-colors-status-info-foreground:       var(--info-foreground);
  --shadcn-colors-status-info-muted:            var(--info-muted);
  --shadcn-colors-focus-ring:                   var(--ring);
  --shadcn-colors-focus-ring-error:             var(--ring-error);

  /* ── Figma Dev Mode shadow component aliases ───────────────────────────── */
  /* Figma decomposes multi-layer shadows into per-component variables.       */
  /* Fallbacks in Figma CSS already work without these, but defining them     */
  /* lets the variables actually resolve instead of falling back.             */

  /* Single-layer: 2xs */
  --2xs-x: 0; --2xs-y: 1px; --2xs-blur: 0; --2xs-spread: 0;
  --2xs-color: rgba(0,0,0,.05);

  /* Single-layer: xs */
  --xs-x: 0; --xs-y: 1px; --xs-blur: 2px; --xs-spread: 0;
  --xs-color: rgba(0,0,0,.05);

  /* Multi-layer: sm */
  --sm-shadow-1-x: 0; --sm-shadow-1-y: 1px; --sm-shadow-1-blur: 3px; --sm-shadow-1-spread: 0;
  --sm-shadow-2-x2: 0; --sm-shadow-2-y: 1px; --sm-shadow-2-blur: 2px; --sm-shadow-2-spread: -1px;
  --sm-color: rgba(0,0,0,.10);

  /* Multi-layer: md */
  --md-shadow-1-x: 0; --md-shadow-1-y: 4px; --md-shadow-1-blur: 6px; --md-shadow-1-spread: -1px;
  --md-shadow-2-x: 0; --md-shadow-2-y: 2px; --md-shadow-2-blur: 4px; --md-shadow-2-spread: -2px;
  --md-color: rgba(0,0,0,.10);

  /* Multi-layer: lg */
  --lg-shadow-1-x: 0; --lg-shadow-1-y: 10px; --lg-shadow-1-blur: 15px; --lg-shadow-1-spread: -3px;
  --lg-shadow-2-x: 0; --lg-shadow-2-y: 4px;  --lg-shadow-2-blur: 6px;  --lg-shadow-2-spread: -4px;
  --lg-color: rgba(0,0,0,.10);

  /* Multi-layer: xl */
  --xl-shadow-1-x: 0; --xl-shadow-1-y: 10px; --xl-shadow-1-blur: 25px; --xl-shadow-1-spread: -5px;
  --xl-shadow-2-x: 0; --xl-shadow-2-y: 8px;  --xl-shadow-2-blur: 10px; --xl-shadow-2-spread: -6px;
  --xl-color: rgba(0,0,0,.10);

  /* Single-layer: 2xl */
  --2xl-x: 0; --2xl-y: 25px; --2xl-blur: 50px; --2xl-spread: -12px;
  --2xl-color: rgba(0,0,0,.25);
}