/* skin-asg.css — A Sustainable Garden ("The Potting Table")
   Skins define ROLE tokens only. Never put component rules here.
   Apply with <html data-skin="asg"> (+ data-theme="dark" for dark). */

[data-skin="asg"] {
  color-scheme: light;

  /* fonts */
  --font-ui: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Space Grotesk', system-ui, sans-serif;
  --font-accent: 'Piazzolla', Georgia, serif;        /* italic warmth: taglines, em, article heads */
  --font-display: 'Space Grotesk', system-ui, sans-serif;

  /* surfaces */
  --c-bg: #F2EEE3;              /* warm parchment */
  --c-bg-alt: #EAE4D4;
  --c-surface: #FBF8EE;         /* paper tile */
  --c-surface-alt: #FFFFFF;     /* inputs, dropdowns */
  --c-surface-raised: #FFFFFF;
  --c-overlay: rgba(38, 38, 30, .55);
  --c-texture: none;

  /* text — all ≥ 4.5:1 on --c-bg and --c-surface */
  --c-ink: #26261E;
  --c-ink-soft: #55553F;
  --c-muted: #6A6653;           /* 4.98 on bg, 4.55 on bg-alt — labels, meta. (#6B6754 was 4.48 on bg-alt; #8A8672 fails at 3.19) */
  --c-ink-inverse: #F2EEE3;

  /* lines */
  --c-line: #E0D8C2;
  --c-line-strong: #C9BFA3;

  /* brand */
  --c-primary: #3D5233;         /* garden green */
  --c-primary-hover: #2E3F26;
  --c-primary-ink: #FFFFFF;
  --c-primary-soft: #E3E9DD;
  --c-accent: #BC572B;          /* terracotta — white text on it 4.65 (#C1592C was 4.43) */
  --c-accent-hover: #A84A22;
  --c-accent-ink: #FFFFFF;
  --c-accent-soft: #F6E3D9;
  --c-accent-text: #A44C25;     /* accent used as TEXT on light surfaces: 4.98 on bg, 4.65 on accent-soft */
  --c-highlight: #E0B581;       /* gold — only inside dark/green surfaces (4.52 on primary, 8.05 on ink surface) */
  --c-on-primary-highlight: #E0B581; /* highlight text on a --c-primary surface (hero italic, tile links) */
  --c-ink-surface: #26261E;     /* the "ink tile" background */
  --c-ink-surface-text: #F2EEE3;

  /* links + focus */
  --c-link: #3D5233;
  --c-link-hover: #2E3F26;
  --c-focus: #BC572B;

  /* status */
  --c-success: #2F6B2C; --c-success-soft: #E1EEDF;
  --c-warning: #8A5A12; --c-warning-soft: #F7EBD2;
  --c-danger:  #A8321F; --c-danger-soft:  #F7DFD9;
  --c-info:    #2F5F8A; --c-info-soft:    #DFE9F3;

  /* article type badges */
  --c-badge-guide: #3D5233;
  --c-badge-comparison: #55553F;
  --c-badge-seasonal: #8A5A12;
  --c-badge-beginner: #2F6B2C;
  --c-badge-buying-guide: #A84A22;
  --c-badge-infographic: #2F5F8A;
  --c-badge-standard: #6B6754;

  /* skeleton */
  --c-skeleton: #E6E0CF;
  --c-skeleton-shine: #F5F1E6;

  /* shape roles */
  --radius-tile: var(--radius-2xl);   /* 22px bento */
  --radius-card: var(--radius-xl);    /* 16px */
  --radius-ctl: var(--radius-lg);     /* 12px inputs, buttons */
  --radius-chip: var(--radius-lg);
  --radius-callout: var(--radius-xl);
  --rule-heading: none;               /* ASG headings have no rule */
  --shadow-card: var(--shadow-md);
  --shadow-card-hover: var(--shadow-lg);
  --shadow-float: var(--shadow-lg);
}

[data-skin="asg"][data-theme="dark"],
[data-skin="asg"] [data-theme="dark"] {
  color-scheme: dark;

  --c-bg: #1C1C17;
  --c-bg-alt: #15150F;
  --c-surface: #26261E;
  --c-surface-alt: #2F2F26;
  --c-surface-raised: #33332A;
  --c-overlay: rgba(0, 0, 0, .6);

  --c-ink: #F2EEE3;
  --c-ink-soft: #CFC9B8;
  --c-muted: #A39E8C;           /* 6.1 on --c-bg */
  --c-ink-inverse: #1C1C17;

  --c-line: #3A3A30;
  --c-line-strong: #4F4F42;

  --c-primary: #A0B890;         /* dark ink on it 7.9 (75% opacity text 4.75); #7FA06A failed at 3.8–4.2 */
  --c-primary-hover: #AFC79F;
  --c-primary-ink: #1C1C17;
  --c-primary-soft: #2A3626;
  --c-accent: #E3845B;          /* dark ink on it 6.29 (80% opacity 4.52) */
  --c-accent-hover: #EC9A74;
  --c-accent-ink: #1C1C17;
  --c-accent-soft: #3D2A20;
  --c-accent-text: #E3845B;
  --c-highlight: #E6B77A;
  --c-on-primary-highlight: #5C2A12; /* the dark-mode primary is light green: gold on it was 1.59 */
  --c-ink-surface: #0F0F0B;
  --c-ink-surface-text: #F2EEE3;

  --c-link: #9DBB89;
  --c-link-hover: #B3CDA1;
  --c-focus: #E3845B;

  --c-success: #8CC586; --c-success-soft: #223121;
  --c-warning: #E0B35A; --c-warning-soft: #352A14;
  --c-danger:  #EA8A79; --c-danger-soft:  #3A201B;
  --c-info:    #8CB8E3; --c-info-soft:    #1F2C38;

  --c-badge-guide: #9DBB89;
  --c-badge-comparison: #CFC9B8;
  --c-badge-seasonal: #E0B35A;
  --c-badge-beginner: #8CC586;
  --c-badge-buying-guide: #EB8A60;
  --c-badge-infographic: #8CB8E3;
  --c-badge-standard: #A39E8C;

  --c-skeleton: #2F2F26;
  --c-skeleton-shine: #3A3A30;

  --shadow-card: 0 12px 32px rgba(0, 0, 0, .35);
  --shadow-card-hover: 0 18px 44px rgba(0, 0, 0, .5);
  --shadow-float: 0 18px 44px rgba(0, 0, 0, .55);
}