/*
 Theme Name:   Astra Child
 Theme URI:    https://tshop.smarthinkscorp.com
 Description:  Child theme de Astra para tshop
 Author:       Archy
 Template:     astra
 Version:      1.7.3
 Text Domain:  astra-child
*/

@import url("https://fonts.googleapis.com/css2?family=Funnel+Sans:ital,wght@0,300..800;1,300..800&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Rubik+Mono+One&display=swap");
body {
  font-family: var(--font-text);
}

:root {
  --font-text: "Funnel Sans", serif;
  --font-headline: "Kanit", serif;
  --font-title: "Rubik Mono One", serif;
  line-height: 1.5;
  font-weight: 400;
  font-family: var(--font-text);

  color-scheme: light dark;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  --primary: #006970;
  --surface-tint: rgb(0 105 112);
  --on-primary: rgb(245, 245, 245);
  --primary-container: rgb(157 240 248);
  --on-primary-container: rgb(0 79 84);
  --secondary: #705289;
  --on-secondary: rgb(245, 245, 245);
  --secondary-container: rgb(241 219 255);
  --on-secondary-container: rgb(87 58 112);
  --tertiary: rgb(130 85 19);
  --on-tertiary: rgb(245, 245, 245);
  --tertiary-container: rgb(255 221 184);
  --on-tertiary-container: rgb(101 62 0);
  --error: rgb(144 74 68);
  --on-error: rgb(245, 245, 245);
  --error-container: rgb(255 218 214);
  --on-error-container: rgb(115 51 46);
  --background: rgb(244 250 251);
  --on-background: rgb(22 29 29);
  --surface: #f6f6f6;
  --on-surface: rgb(23 29 30);
  --surface-variant: rgb(218 228 229);
  --on-surface-variant: rgb(63 72 73);
  --outline: rgb(111 121 122);
  --outline-variant: rgb(190 200 201);
  --shadow: rgb(0 0 0);
  --scrim: rgb(0 0 0);
  --inverse-surface: rgb(43 49 51);
  --inverse-on-surface: rgb(236 242 243);
  --inverse-primary: rgb(128 212 220);
  --primary-fixed: rgb(157 240 248);
  --on-primary-fixed: rgb(0 32 34);
  --primary-fixed-dim: rgb(128 212 220);
  --on-primary-fixed-variant: rgb(0 79 84);
  --secondary-fixed: rgb(241 219 255);
  --on-secondary-fixed: rgb(41 12 65);
  --secondary-fixed-dim: rgb(220 185 248);
  --on-secondary-fixed-variant: rgb(87 58 112);
  --tertiary-fixed: rgb(255 221 184);
  --on-tertiary-fixed: rgb(42 23 0);
  --tertiary-fixed-dim: rgb(248 187 113);
  --on-tertiary-fixed-variant: rgb(101 62 0);
  --surface-dim: rgb(213 219 220);
  --surface-bright: rgb(245 250 251);
  --surface-container-lowest: rgb(255 255 255);
  --surface-container-lowest-rgb: 255 255 255;
  --surface-container-low: rgb(239 245 246);
  --surface-container: rgb(233 239 240);
  --surface-container-high: rgb(227 233 234);
  --surface-container-highest: rgb(222 227 229);
  --radius: 0.625rem;

  --chart-1: #705289;
  --chart-2: #8f6fa9;
  --chart-3: #b08eca;
  --chart-4: #d1aeec;
  --chart-5: #f3cfff;
  --chart-6: #4c4452;
  --chart-7: #6b4d84;
  --chart-8: #3a2052;
  --chart-9: #270f3f;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: rgb(128 212 220);
    --surface-tint: rgb(128 212 220);
    --on-primary: rgb(0 54 58);
    --primary-container: rgb(0 79 84);
    --on-primary-container: rgb(157 240 248);
    --secondary: rgb(220 185 248);
    --on-secondary: rgb(63 35 88);
    --secondary-container: rgb(87 58 112);
    --on-secondary-container: rgb(241 219 255);
    --tertiary: rgb(248 187 113);
    --on-tertiary: rgb(71 42 0);
    --tertiary-container: rgb(101 62 0);
    --on-tertiary-container: rgb(255 221 184);
    --error: rgb(255 180 172);
    --on-error: rgb(86 30 26);
    --error-container: rgb(115 51 46);
    --on-error-container: rgb(255 218 214);
    --background: rgb(14 20 21);
    --on-background: rgb(222 228 228);
    --surface: rgb(14 20 21);
    --on-surface: rgb(222 227 229);
    --surface-variant: rgb(63 72 73);
    --on-surface-variant: rgb(190 200 201);
    --outline: rgb(137 147 147);
    --outline-variant: rgb(63 72 73);
    --shadow: rgb(0 0 0);
    --scrim: rgb(0 0 0);
    --inverse-surface: rgb(222 227 229);
    --inverse-on-surface: rgb(43 49 51);
    --inverse-primary: rgb(0 105 112);
    --primary-fixed: rgb(157 240 248);
    --on-primary-fixed: rgb(0 32 34);
    --primary-fixed-dim: rgb(128 212 220);
    --on-primary-fixed-variant: rgb(0 79 84);
    --secondary-fixed: rgb(241 219 255);
    --on-secondary-fixed: rgb(41 12 65);
    --secondary-fixed-dim: rgb(220 185 248);
    --on-secondary-fixed-variant: rgb(87 58 112);
    --tertiary-fixed: rgb(255 221 184);
    --on-tertiary-fixed: rgb(42 23 0);
    --tertiary-fixed-dim: rgb(248 187 113);
    --on-tertiary-fixed-variant: rgb(101 62 0);
    --surface-dim: rgb(14 20 21);
    --surface-bright: rgb(52 58 59);
    --surface-container-lowest: rgb(9 15 16);
    --surface-container-lowest-rgb: 9 15 16;
    --surface-container-low: rgb(23 29 30);
    --surface-container: rgb(27 33 34);
    --surface-container-high: rgb(37 43 44);
    --surface-container-highest: rgb(48 54 55);
  }
}

/**
 * Alias semánticos sobre la paleta M3 de arriba.
 * Custom properties planas (no @theme inline: este proyecto no tiene build
 * de Tailwind, es CSS servido tal cual por WordPress).
 */
:root {
  --color-primary: var(--primary);
  --color-on-primary: var(--on-primary);
  --color-primary-container: var(--primary-container);
  --color-on-primary-container: var(--on-primary-container);
  --color-secondary: var(--secondary);
  --color-on-secondary: var(--on-secondary);
  --color-secondary-container: var(--secondary-container);
  --color-on-secondary-container: var(--on-secondary-container);
  --color-tertiary: var(--tertiary);
  --color-on-tertiary: var(--on-tertiary);
  --color-tertiary-container: var(--tertiary-container);
  --color-on-tertiary-container: var(--on-tertiary-container);
  --color-error: var(--error);
  --color-on-error: var(--on-error);
  --color-error-container: var(--error-container);
  --color-on-error-container: var(--on-error-container);
  --color-background: var(--background);
  --color-on-background: var(--on-background);
  --color-surface: var(--surface);
  --color-on-surface: var(--on-surface);
  --color-surface-variant: var(--surface-variant);
  --color-on-surface-variant: var(--on-surface-variant);
  --color-outline: var(--outline);
  --color-outline-variant: var(--outline-variant);
  --color-shadow: var(--shadow);
  --color-scrim: var(--scrim);
  --color-inverse-surface: var(--inverse-surface);
  --color-inverse-on-surface: var(--inverse-on-surface);
  --color-inverse-primary: var(--inverse-primary);
  --color-surface-dim: var(--surface-dim);
  --color-surface-bright: var(--surface-bright);
  --color-surface-container-lowest: var(--surface-container-lowest);
  --color-surface-container-low: var(--surface-container-low);
  --color-surface-container: var(--surface-container);
  --color-surface-container-high: var(--surface-container-high);
  --color-surface-container-highest: var(--surface-container-highest);

  --font-numbers: var(--font-text);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-chart-6: var(--chart-6);
  --color-chart-7: var(--chart-7);
  --color-chart-8: var(--chart-8);
  --color-chart-9: var(--chart-9);

  /* Alias usados por header.css (y futuros componentes) sobre la paleta M3 */
  --primary-foreground: var(--on-primary);
  --accent: var(--tertiary);
  --accent-foreground: var(--on-tertiary);
  --muted-foreground: var(--on-surface-variant);
  --destructive: var(--error);
  --destructive-foreground: var(--on-error);

  /* success no tiene rol M3 nativo: verde fijo, consistente en light/dark */
  --success: #2e7d32;
  --success-foreground: rgb(245 245 245);
}