/**
 * JSYK Astra – Design Tokens
 *
 * Single source of truth for all visual properties.
 * Edit this file to rebrand. Do not hardcode colours,
 * spacing, or typography values in other CSS files.
 *
 * @since 0.2.0
 */

/* ==========================================================================
   1. COLOUR TOKENS – Light Mode (Default)
   ========================================================================== */

:root,
html[data-theme="light"] {
	/* --- Backgrounds --- */
	--jsyk-color-bg:              #f7f7f5;
	--jsyk-color-surface:         #ffffff;
	--jsyk-color-surface-raised:  #ffffff;

	/* --- Text --- */
	--jsyk-color-text:            #1e1e2a;
	--jsyk-color-text-muted:      #5c6370;
	--jsyk-color-heading:         #141420;

	/* --- Borders --- */
	--jsyk-color-border:          #e2e2de;
	--jsyk-color-border-strong:   #c8c8c2;

	/* --- Accent (calm confident blue) --- */
	--jsyk-color-accent:          #3772c7;
	--jsyk-color-accent-hover:    #2b5da3;
	--jsyk-color-accent-contrast: #ffffff;

	/* --- Semantic states --- */
	--jsyk-color-success:         #2a7d4f;
	--jsyk-color-success-light:   #e8f5ee;
	--jsyk-color-warning:         #b5850a;
	--jsyk-color-warning-light:   #fdf6e3;
	--jsyk-color-danger:          #c53030;
	--jsyk-color-danger-light:    #fde8e8;
	--jsyk-color-info:            #3772c7;
	--jsyk-color-info-light:      #e8f0fb;

	/* --- Interaction --- */
	--jsyk-color-focus-ring:      #3772c7;
	--jsyk-color-overlay:         rgba(20, 20, 32, 0.45);

	/* --- Shadows --- */
	--jsyk-color-shadow:          rgba(0, 0, 0, 0.06);

	/* --- Code / Technical --- */
	--jsyk-color-code-bg:         #f0f0ec;
	--jsyk-color-code-text:       #1e1e2a;
}

/* ==========================================================================
   2. COLOUR TOKENS – Dark Mode
   ========================================================================== */

html[data-theme="dark"] {
	--jsyk-color-bg:              #121220;
	--jsyk-color-surface:         #1a1a2e;
	--jsyk-color-surface-raised:  #222240;

	--jsyk-color-text:            #e4e4ea;
	--jsyk-color-text-muted:      #8e8ea0;
	--jsyk-color-heading:         #f0f0f5;

	--jsyk-color-border:          #2e2e48;
	--jsyk-color-border-strong:   #3e3e5c;

	--jsyk-color-accent:          #5b9cf5;
	--jsyk-color-accent-hover:    #7bb3ff;
	--jsyk-color-accent-contrast: #121220;

	--jsyk-color-success:         #4ade80;
	--jsyk-color-success-light:   rgba(74, 222, 128, 0.12);
	--jsyk-color-warning:         #facc15;
	--jsyk-color-warning-light:   rgba(250, 204, 21, 0.12);
	--jsyk-color-danger:          #f87171;
	--jsyk-color-danger-light:    rgba(248, 113, 113, 0.12);
	--jsyk-color-info:            #5b9cf5;
	--jsyk-color-info-light:      rgba(91, 156, 245, 0.12);

	--jsyk-color-focus-ring:      #5b9cf5;
	--jsyk-color-overlay:         rgba(0, 0, 0, 0.6);

	--jsyk-color-shadow:          rgba(0, 0, 0, 0.3);

	--jsyk-color-code-bg:         #1a1a2e;
	--jsyk-color-code-text:       #e4e4ea;
}

/* System preference fallback (when no data-theme is set) */
@media (prefers-color-scheme: dark) {
	html:not([data-theme]) {
		--jsyk-color-bg:              #121220;
		--jsyk-color-surface:         #1a1a2e;
		--jsyk-color-surface-raised:  #222240;

		--jsyk-color-text:            #e4e4ea;
		--jsyk-color-text-muted:      #8e8ea0;
		--jsyk-color-heading:         #f0f0f5;

		--jsyk-color-border:          #2e2e48;
		--jsyk-color-border-strong:   #3e3e5c;

		--jsyk-color-accent:          #5b9cf5;
		--jsyk-color-accent-hover:    #7bb3ff;
		--jsyk-color-accent-contrast: #121220;

		--jsyk-color-success:         #4ade80;
		--jsyk-color-success-light:   rgba(74, 222, 128, 0.12);
		--jsyk-color-warning:         #facc15;
		--jsyk-color-warning-light:   rgba(250, 204, 21, 0.12);
		--jsyk-color-danger:          #f87171;
		--jsyk-color-danger-light:    rgba(248, 113, 113, 0.12);
		--jsyk-color-info:            #5b9cf5;
		--jsyk-color-info-light:      rgba(91, 156, 245, 0.12);

		--jsyk-color-focus-ring:      #5b9cf5;
		--jsyk-color-overlay:         rgba(0, 0, 0, 0.6);

		--jsyk-color-shadow:          rgba(0, 0, 0, 0.3);

		--jsyk-color-code-bg:         #1a1a2e;
		--jsyk-color-code-text:       #e4e4ea;
	}
}

/* ==========================================================================
   3. TYPOGRAPHY TOKENS
   ========================================================================== */

:root {
	/* --- Font families --- */
	--jsyk-font-heading: Outfit, "Arial Rounded MT Bold", Arial, sans-serif;
	--jsyk-font-body:    "DM Sans", Inter, Arial, sans-serif;
	--jsyk-font-mono:    "JetBrains Mono", "Fira Code", Consolas, monospace;

	/* --- Font sizes --- */
	--jsyk-text-xs:   0.75rem;    /* 12px */
	--jsyk-text-sm:   0.875rem;   /* 14px */
	--jsyk-text-base: 1rem;       /* 16px */
	--jsyk-text-md:   1.125rem;   /* 18px */
	--jsyk-text-lg:   1.25rem;    /* 20px */
	--jsyk-text-xl:   1.5rem;     /* 24px */
	--jsyk-text-2xl:  1.875rem;   /* 30px */
	--jsyk-text-3xl:  2.25rem;    /* 36px */
	--jsyk-text-4xl:  3rem;       /* 48px */

	/* --- Font weights --- */
	--jsyk-weight-normal:   400;
	--jsyk-weight-medium:   500;
	--jsyk-weight-semibold: 600;
	--jsyk-weight-bold:     700;

	/* --- Line heights --- */
	--jsyk-leading-tight:  1.15;
	--jsyk-leading-snug:   1.3;
	--jsyk-leading-normal: 1.5;
	--jsyk-leading-relaxed: 1.65;

	/* --- Letter spacing --- */
	--jsyk-tracking-tight:  -0.01em;
	--jsyk-tracking-normal:  0;
	--jsyk-tracking-wide:    0.02em;
	--jsyk-tracking-wider:   0.06em;
}

/* ==========================================================================
   4. SPACING TOKENS
   ========================================================================== */

:root {
	--jsyk-space-1:  0.25rem;  /* 4px  */
	--jsyk-space-2:  0.5rem;   /* 8px  */
	--jsyk-space-3:  0.75rem;  /* 12px */
	--jsyk-space-4:  1rem;     /* 16px */
	--jsyk-space-5:  1.25rem;  /* 20px */
	--jsyk-space-6:  1.5rem;   /* 24px */
	--jsyk-space-8:  2rem;     /* 32px */
	--jsyk-space-10: 2.5rem;   /* 40px */
	--jsyk-space-12: 3rem;     /* 48px */
	--jsyk-space-16: 4rem;     /* 64px */
	--jsyk-space-20: 5rem;     /* 80px */
	--jsyk-space-24: 6rem;     /* 96px */
}

/* ==========================================================================
   5. LAYOUT TOKENS
   ========================================================================== */

:root {
	--jsyk-width-narrow:    42rem;   /* ~672px – article reading */
	--jsyk-width-default:   56rem;   /* ~896px – general content */
	--jsyk-width-wide:      72rem;   /* ~1152px – dashboards/tables */
	--jsyk-width-full:      90rem;   /* ~1440px – max site width */

	--jsyk-sidebar-width:   18rem;   /* ~288px */
	--jsyk-gutter:          var(--jsyk-space-6);
}

/* ==========================================================================
   6. BORDER RADIUS TOKENS
   ========================================================================== */

:root {
	--jsyk-radius-sm:   0.25rem;   /* 4px  */
	--jsyk-radius-md:   0.5rem;    /* 8px  */
	--jsyk-radius-lg:   0.75rem;   /* 12px */
	--jsyk-radius-xl:   1rem;      /* 16px */
	--jsyk-radius-full: 9999px;    /* pill shape */
}

/* ==========================================================================
   7. SHADOW TOKENS
   ========================================================================== */

:root {
	--jsyk-shadow-sm:   0 1px 3px var(--jsyk-color-shadow);
	--jsyk-shadow-md:   0 2px 8px var(--jsyk-color-shadow);
	--jsyk-shadow-lg:   0 4px 16px var(--jsyk-color-shadow);
	--jsyk-shadow-none: none;
}

/* ==========================================================================
   8. TRANSITION TOKENS
   ========================================================================== */

:root {
	--jsyk-duration-fast:   120ms;
	--jsyk-duration-normal: 200ms;
	--jsyk-duration-slow:   350ms;
	--jsyk-easing-default:  cubic-bezier(0.4, 0, 0.2, 1);
	--jsyk-easing-in:       cubic-bezier(0.4, 0, 1, 1);
	--jsyk-easing-out:      cubic-bezier(0, 0, 0.2, 1);
	--jsyk-transition:      var(--jsyk-duration-normal) var(--jsyk-easing-default);
}