/* =====================================================================
   Cafetito — Design tokens
   ---------------------------------------------------------------------
   Single source of truth. Mirrors SPEC/design-tokens.md exactly.
   Scope strategy:
     - Public/email tokens scoped under .cafetito-preset-{slug}.
     - Admin tokens scoped under .cafetito-admin (lives inside .wrap).
     - Tokens are exposed as CSS custom properties prefixed --cf-*.
     - Theme preset reads variables exposed by host theme and falls back
       to Neutral values when no theme variable is present.
   No emojis. No external fonts. No CDN.
   ===================================================================== */


/* =====================================================================
   PRESET · Neutral  (default)
   Slug: cafetito-preset-neutral
   ===================================================================== */
.cafetito-preset-neutral {
  /* Color */
  --cf-color-bg:               #FFFFFF;
  --cf-color-surface:          #FFFFFF;
  --cf-color-surface-subtle:   #F6F6F6;
  --cf-color-text:             #1A1A1A;
  --cf-color-text-muted:       #6B6B6B;
  --cf-color-border:           #E1E1E1;
  --cf-color-border-strong:    #C7C7C7;
  --cf-color-primary:          #2563EB;
  --cf-color-primary-hover:    #1D4ED8;
  --cf-color-primary-active:   #1E40AF;
  --cf-color-primary-text:     #FFFFFF;
  --cf-color-accent:           #2563EB;
  --cf-color-success:          #15803D;
  --cf-color-success-bg:       #ECFDF5;
  --cf-color-warning:          #B45309;
  --cf-color-warning-bg:       #FFFBEB;
  --cf-color-danger:           #B42318;
  --cf-color-danger-bg:        #FEF2F2;
  --cf-color-focus-ring:       rgba(37, 99, 235, 0.30);

  /* Typography */
  --cf-font-display:           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cf-font-ui:                -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cf-font-mono:              ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --cf-font-size-xs:           11px;
  --cf-font-size-sm:           12px;
  --cf-font-size-base:         14px;
  --cf-font-size-md:           15px;
  --cf-font-size-lg:           17px;
  --cf-font-size-xl:           20px;
  --cf-font-size-2xl:          24px;

  --cf-font-weight-regular:    400;
  --cf-font-weight-medium:     500;
  --cf-font-weight-semibold:   600;
  --cf-font-weight-bold:       700;

  --cf-line-height-tight:      1.2;
  --cf-line-height-normal:     1.5;
  --cf-line-height-relaxed:    1.65;

  /* Radius */
  --cf-radius-input:           6px;
  --cf-radius-card:            6px;
  --cf-radius-button:          6px;
  --cf-radius-chip:            6px;
  --cf-radius-pill:            999px;

  /* Spacing scale: 4 / 8 / 12 / 16 / 24 / 32 / 48 */
  --cf-space-1:                4px;
  --cf-space-2:                8px;
  --cf-space-3:                12px;
  --cf-space-4:                16px;
  --cf-space-6:                24px;
  --cf-space-8:                32px;
  --cf-space-12:               48px;

  /* Shadow */
  --cf-shadow-sm:              0 1px 2px rgba(0,0,0,0.04);
  --cf-shadow-md:              0 4px 12px rgba(0,0,0,0.06);

  /* Motion */
  --cf-duration-fast:          120ms;
  --cf-duration-base:          180ms;
  --cf-duration-slow:          240ms;
  --cf-easing-standard:        cubic-bezier(0.2, 0, 0, 1);

  /* Focus */
  --cf-focus-ring-width:       3px;

  /* Layout */
  --cf-form-max-width:         440px;
  --cf-touch-min:              44px;
}


/* =====================================================================
   PRESET · Coffee
   Slug: cafetito-preset-coffee
   ===================================================================== */
.cafetito-preset-coffee {
  /* Color */
  --cf-color-bg:               #F7F1E8;
  --cf-color-surface:          #FFFFFF;
  --cf-color-surface-subtle:   #F0E6D6;
  --cf-color-text:             #2C1B12;
  --cf-color-text-muted:       #7A6253;
  --cf-color-border:           #E6D9C7;
  --cf-color-border-strong:    #CDB89F;
  --cf-color-primary:          #6B3F2A;
  --cf-color-primary-hover:    #54301F;
  --cf-color-primary-active:   #3F2317;
  --cf-color-primary-text:     #FBF6EE;
  --cf-color-accent:           #D9A066;
  --cf-color-success:          #2F6B3A;
  --cf-color-success-bg:       #EDF5E9;
  --cf-color-warning:          #A86A1A;
  --cf-color-warning-bg:       #FBF1DE;
  --cf-color-danger:           #A33A28;
  --cf-color-danger-bg:        #FBEDE9;
  --cf-color-focus-ring:       rgba(217, 160, 102, 0.45);

  /* Typography */
  --cf-font-display:           Georgia, "Times New Roman", "Iowan Old Style", serif;
  --cf-font-ui:                "Helvetica Neue", Helvetica, Arial, sans-serif;
  --cf-font-mono:              ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --cf-font-size-xs:           11px;
  --cf-font-size-sm:           12px;
  --cf-font-size-base:         14px;
  --cf-font-size-md:           15px;
  --cf-font-size-lg:           18px;
  --cf-font-size-xl:           22px;
  --cf-font-size-2xl:          28px;

  --cf-font-weight-regular:    400;
  --cf-font-weight-medium:     500;
  --cf-font-weight-semibold:   600;
  --cf-font-weight-bold:       700;

  --cf-line-height-tight:      1.15;
  --cf-line-height-normal:     1.55;
  --cf-line-height-relaxed:    1.7;

  /* Radius */
  --cf-radius-input:           8px;
  --cf-radius-card:            12px;
  --cf-radius-button:          999px;
  --cf-radius-chip:            999px;
  --cf-radius-pill:            999px;

  /* Spacing */
  --cf-space-1:                4px;
  --cf-space-2:                8px;
  --cf-space-3:                12px;
  --cf-space-4:                16px;
  --cf-space-6:                24px;
  --cf-space-8:                32px;
  --cf-space-12:               48px;

  /* Shadow */
  --cf-shadow-sm:              0 1px 2px rgba(44,27,18,0.06);
  --cf-shadow-md:              0 8px 24px rgba(44,27,18,0.08);

  /* Motion */
  --cf-duration-fast:          120ms;
  --cf-duration-base:          200ms;
  --cf-duration-slow:          280ms;
  --cf-easing-standard:        cubic-bezier(0.2, 0, 0, 1);

  --cf-focus-ring-width:       3px;
  --cf-form-max-width:         440px;
  --cf-touch-min:              44px;
}


/* =====================================================================
   PRESET · Minimal
   Slug: cafetito-preset-minimal
   ===================================================================== */
.cafetito-preset-minimal {
  /* Color */
  --cf-color-bg:               #FAFAFA;
  --cf-color-surface:          #FFFFFF;
  --cf-color-surface-subtle:   #F4F4F4;
  --cf-color-text:             #0A0A0A;
  --cf-color-text-muted:       #737373;
  --cf-color-border:           #E5E5E5;
  --cf-color-border-strong:    #0A0A0A;
  --cf-color-primary:          #0A0A0A;
  --cf-color-primary-hover:    #262626;
  --cf-color-primary-active:   #404040;
  --cf-color-primary-text:     #FFFFFF;
  --cf-color-accent:           #137A4A;
  --cf-color-success:          #137A4A;
  --cf-color-success-bg:       #ECFDF5;
  --cf-color-warning:          #92400E;
  --cf-color-warning-bg:       #FEF3C7;
  --cf-color-danger:           #B42318;
  --cf-color-danger-bg:        #FEF2F2;
  --cf-color-focus-ring:       rgba(10, 10, 10, 0.25);

  /* Typography */
  --cf-font-display:           "Helvetica Neue", Helvetica, Arial, sans-serif;
  --cf-font-ui:                "Helvetica Neue", Helvetica, Arial, sans-serif;
  --cf-font-mono:              ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --cf-font-size-xs:           11px;
  --cf-font-size-sm:           12px;
  --cf-font-size-base:         14px;
  --cf-font-size-md:           15px;
  --cf-font-size-lg:           18px;
  --cf-font-size-xl:           24px;
  --cf-font-size-2xl:          32px;

  --cf-font-weight-regular:    400;
  --cf-font-weight-medium:     500;
  --cf-font-weight-semibold:   600;
  --cf-font-weight-bold:       700;

  --cf-line-height-tight:      1.1;
  --cf-line-height-normal:     1.5;
  --cf-line-height-relaxed:    1.65;

  /* Radius */
  --cf-radius-input:           4px;
  --cf-radius-card:            4px;
  --cf-radius-button:          4px;
  --cf-radius-chip:            4px;
  --cf-radius-pill:            999px;

  /* Spacing — slightly more generous default */
  --cf-space-1:                4px;
  --cf-space-2:                8px;
  --cf-space-3:                12px;
  --cf-space-4:                16px;
  --cf-space-6:                24px;
  --cf-space-8:                32px;
  --cf-space-12:               48px;

  /* Shadow — none, hierarchy from weight + space */
  --cf-shadow-sm:              none;
  --cf-shadow-md:              none;

  /* Motion */
  --cf-duration-fast:          120ms;
  --cf-duration-base:          160ms;
  --cf-duration-slow:          220ms;
  --cf-easing-standard:        cubic-bezier(0.2, 0, 0, 1);

  --cf-focus-ring-width:       3px;
  --cf-form-max-width:         440px;
  --cf-touch-min:              44px;
}


/* =====================================================================
   PRESET · Site theme
   Slug: cafetito-preset-theme
   ---------------------------------------------------------------------
   Reads variables exposed by the host theme. Each token falls back to
   the corresponding Neutral value when the theme exposes nothing.
   Block themes expose --wp--preset--color--*, --wp--preset--font-family--*,
   --wp--preset--font-size--*. The chain below uses the most common slugs.
   The shop owner can also override individual values from the Customizer
   by setting --cafetito-color-accent etc. on body.
   ===================================================================== */
.cafetito-preset-theme {
  --cf-color-bg:               var(--cafetito-color-bg,
                                 var(--wp--preset--color--base,
                                   #FFFFFF));
  --cf-color-surface:          var(--cafetito-color-surface,
                                 var(--wp--preset--color--base,
                                   #FFFFFF));
  --cf-color-surface-subtle:   var(--cafetito-color-surface-subtle, #F6F6F6);
  --cf-color-text:             var(--cafetito-color-text,
                                 var(--wp--preset--color--contrast,
                                   var(--wp--preset--color--foreground,
                                     #1A1A1A)));
  --cf-color-text-muted:       var(--cafetito-color-text-muted, #6B6B6B);
  --cf-color-border:           var(--cafetito-color-border, #E1E1E1);
  --cf-color-border-strong:    var(--cafetito-color-border-strong, #C7C7C7);

  --cf-color-primary:          var(--cafetito-color-accent,
                                 var(--wp--preset--color--primary,
                                   var(--wp--preset--color--accent,
                                     #2563EB)));
  --cf-color-primary-hover:    var(--cafetito-color-accent-hover, #1D4ED8);
  --cf-color-primary-active:   var(--cafetito-color-accent-active, #1E40AF);
  --cf-color-primary-text:     var(--cafetito-color-accent-contrast, #FFFFFF);
  --cf-color-accent:           var(--cafetito-color-accent,
                                 var(--wp--preset--color--primary, #2563EB));

  --cf-color-success:          #15803D;
  --cf-color-success-bg:       #ECFDF5;
  --cf-color-warning:          #B45309;
  --cf-color-warning-bg:       #FFFBEB;
  --cf-color-danger:           #B42318;
  --cf-color-danger-bg:        #FEF2F2;
  --cf-color-focus-ring:       rgba(37, 99, 235, 0.30);

  --cf-font-display:           var(--cafetito-font-family-display,
                                 var(--wp--preset--font-family--heading,
                                   var(--wp--preset--font-family--body,
                                     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif)));
  --cf-font-ui:                var(--cafetito-font-family,
                                 var(--wp--preset--font-family--body,
                                   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif));
  --cf-font-mono:              ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --cf-font-size-xs:           11px;
  --cf-font-size-sm:           12px;
  --cf-font-size-base:         14px;
  --cf-font-size-md:           15px;
  --cf-font-size-lg:           17px;
  --cf-font-size-xl:           20px;
  --cf-font-size-2xl:          24px;

  --cf-font-weight-regular:    400;
  --cf-font-weight-medium:     500;
  --cf-font-weight-semibold:   600;
  --cf-font-weight-bold:       700;

  --cf-line-height-tight:      1.2;
  --cf-line-height-normal:     1.5;
  --cf-line-height-relaxed:    1.65;

  --cf-radius-input:           var(--cafetito-radius,
                                 var(--wp--custom--border--radius, 6px));
  --cf-radius-card:            var(--cafetito-radius-card,
                                 var(--wp--custom--border--radius, 6px));
  --cf-radius-button:          var(--cafetito-radius-button,
                                 var(--wp--custom--border--radius, 6px));
  --cf-radius-chip:            var(--cafetito-radius, 6px);
  --cf-radius-pill:            999px;

  --cf-space-1:                4px;
  --cf-space-2:                8px;
  --cf-space-3:                12px;
  --cf-space-4:                16px;
  --cf-space-6:                24px;
  --cf-space-8:                32px;
  --cf-space-12:               48px;

  --cf-shadow-sm:              0 1px 2px rgba(0,0,0,0.04);
  --cf-shadow-md:              0 4px 12px rgba(0,0,0,0.06);

  --cf-duration-fast:          120ms;
  --cf-duration-base:          180ms;
  --cf-duration-slow:          240ms;
  --cf-easing-standard:        cubic-bezier(0.2, 0, 0, 1);

  --cf-focus-ring-width:       3px;
  --cf-form-max-width:         440px;
  --cf-touch-min:              44px;
}


/* =====================================================================
   Admin scope · WordPress-native look
   Class: .cafetito-admin (sits inside .wrap)
   Values pinned to current WP admin (Iceberg color scheme baseline).
   ===================================================================== */
.cafetito-admin {
  --cfa-color-bg:              #F0F0F1;
  --cfa-color-surface:         #FFFFFF;
  --cfa-color-surface-alt:     #F6F7F7;
  --cfa-color-text:            #1D2327;
  --cfa-color-text-muted:      #50575E;
  --cfa-color-text-subtle:     #646970;
  --cfa-color-border:          #C3C4C7;
  --cfa-color-border-subtle:   #DCDCDE;
  --cfa-color-primary:         #2271B1;
  --cfa-color-primary-hover:   #135E96;
  --cfa-color-primary-active:  #0A4B78;
  --cfa-color-primary-text:    #FFFFFF;
  --cfa-color-link:            #2271B1;
  --cfa-color-link-hover:      #135E96;
  --cfa-color-success:         #007017;
  --cfa-color-success-bg:      #EDFAEF;
  --cfa-color-warning:         #997404;
  --cfa-color-warning-bg:      #FCF9E8;
  --cfa-color-danger:          #B32D2E;
  --cfa-color-danger-bg:       #FBEAEA;
  --cfa-color-pending:         #646970;
  --cfa-color-pending-bg:      #F0F0F1;
  --cfa-color-focus:           #2271B1;

  --cfa-font-ui:               -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --cfa-font-mono:             Consolas, Monaco, monospace;

  --cfa-font-size-sm:          12px;
  --cfa-font-size-base:        13px;
  --cfa-font-size-md:          14px;
  --cfa-font-size-lg:          16px;
  --cfa-font-size-xl:          20px;
  --cfa-font-size-2xl:         23px;

  --cfa-line-height-base:      1.5;

  --cfa-radius-input:          4px;
  --cfa-radius-card:           4px;
  --cfa-radius-button:         3px;
  --cfa-radius-pill:           9px;

  --cfa-space-1:               4px;
  --cfa-space-2:               8px;
  --cfa-space-3:               12px;
  --cfa-space-4:               16px;
  --cfa-space-6:               24px;
  --cfa-space-8:               32px;

  --cfa-shadow-sm:             0 1px 1px rgba(0,0,0,0.04);
  --cfa-shadow-md:             0 2px 6px rgba(0,0,0,0.08);

  --cfa-duration-fast:         100ms;
  --cfa-duration-base:         180ms;

  --cfa-focus-ring:            0 0 0 1px #2271B1, 0 0 2px 1px rgba(34,113,177,0.8);
}


/* =====================================================================
   Breakpoints (documented; used in module CSS)
   ---------------------------------------------------------------------
   --cf-bp-mobile-max:  480px    Public form switches to single-column.
   --cf-bp-admin-mobile: 782px   WordPress admin breakpoint.
   --cf-bp-desktop:     1024px   Desktop.
   Email max-width: 600px (declared inline in email markup).
   Public form min supported: 320px wide.
   ===================================================================== */