/**
 * OpsKit Design Tokens
 * ====================
 * Standalone CSS custom properties mirroring what theme.json generates in the
 * block theme. Defining them here lets the design system work with ANY active
 * theme, not only the OpsEngine block theme.
 *
 * Two groups:
 *   --wp--preset--*   : colour palette, gradients, font families/sizes, shadows
 *   --wp--custom--*   : spacing, layout, radii, tracking, line-height, surfaces
 *
 * These are the exact values from the OpsEngine Figma baseline. Override any
 * token via the OpsKit Global Settings page (Settings → OpsKit) or by adding
 * a child theme / custom CSS rule targeting :root.
 */

/* -------------------------------------------------------------------------- *
 * Font faces
 * -------------------------------------------------------------------------- */

/* Space Grotesk — Display headings (Latin) */
@font-face {
	font-family: "Space Grotesk";
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	src: url("../assets/fonts/space-grotesk-latin-500-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Space Grotesk";
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	src: url("../assets/fonts/space-grotesk-latin-600-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Sans Arabic — Body & section headings (Arabic + Latin) */
@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url("../assets/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC;
}

@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url("../assets/fonts/ibm-plex-sans-arabic-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	src: url("../assets/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC;
}

@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	src: url("../assets/fonts/ibm-plex-sans-arabic-latin-500-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	src: url("../assets/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC;
}

@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	src: url("../assets/fonts/ibm-plex-sans-arabic-latin-600-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter — UI labels */
@font-face {
	font-family: "Inter";
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url("../assets/fonts/inter-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -------------------------------------------------------------------------- *
 * Design tokens
 * -------------------------------------------------------------------------- */
:root {

	/* --- Colour palette (--wp--preset--color--*) --- */
	--wp--preset--color--bg:         #100c0a;
	--wp--preset--color--surface:    #171310;
	--wp--preset--color--surface-2:  #1e1a16;
	--wp--preset--color--accent:     #ff761c;
	--wp--preset--color--text:       #faf8f5;
	--wp--preset--color--text-muted: #a29e96;
	--wp--preset--color--on-accent:  #0d0b09;

	/* --- Gradients (--wp--preset--gradient--*) --- */
	--wp--preset--gradient--accent:       linear-gradient(135deg, #fa7c20 0%, #e84400 100%);
	--wp--preset--gradient--surface-card: linear-gradient(180deg, #1e1a16 0%, #15110e 100%);

	/* --- Font families (--wp--preset--font-family--*) --- */
	--wp--preset--font-family--display: "Space Grotesk", "IBM Plex Sans Arabic", system-ui, sans-serif;
	--wp--preset--font-family--body:    "IBM Plex Sans Arabic", system-ui, sans-serif;
	--wp--preset--font-family--label:   "Inter", "IBM Plex Sans Arabic", system-ui, sans-serif;

	/* --- Font sizes (--wp--preset--font-size--*) --- */
	--wp--preset--font-size--eyebrow: 12px;
	--wp--preset--font-size--card:    14px;
	--wp--preset--font-size--body:    16px;
	--wp--preset--font-size--lead:    18px;
	--wp--preset--font-size--logo:    clamp(28px, 4vw, 36px);
	--wp--preset--font-size--h2:      clamp(32px, 4vw, 48px);
	--wp--preset--font-size--hero:    clamp(40px, 5vw, 60px);

	/* --- Shadow presets (--wp--preset--shadow--*) --- */
	--wp--preset--shadow--card: 0 30px 30px rgba(0, 0, 0, 0.6);
	--wp--preset--shadow--glow: 0 10px 20px rgba(255, 118, 28, 0.6);

	/* --- Border radii (--wp--custom--radius--*) --- */
	--wp--custom--radius--sm:   10px;
	--wp--custom--radius--md:   12px;
	--wp--custom--radius--lg:   16px;
	--wp--custom--radius--pill: 9999px;

	/* --- Shadows (--wp--custom--shadow--*) --- */
	--wp--custom--shadow--card:             0 30px 30px rgba(0, 0, 0, 0.6);
	--wp--custom--shadow--card-soft:        0 30px 60px -30px rgba(0, 0, 0, 0.6);
	--wp--custom--shadow--glow:             0 10px 20px rgba(255, 118, 28, 0.6);
	--wp--custom--shadow--inset-highlight:  inset 0 1px 0 0 rgba(255, 255, 255, 0.04);

	/* --- Borders (--wp--custom--border--*) --- */
	--wp--custom--border--subtle: rgba(255, 255, 255, 0.08);
	--wp--custom--border--strong: rgba(255, 255, 255, 0.15);

	/* --- Surfaces (--wp--custom--surface--*) --- */
	--wp--custom--surface--step:              #171310;
	--wp--custom--surface--overlay:           rgba(23, 19, 16, 0.6);
	--wp--custom--surface--translucent:       rgba(255, 255, 255, 0.05);
	--wp--custom--surface--translucent-hover: rgba(255, 255, 255, 0.09);

	/* --- Accent tints (--wp--custom--accent--*) --- */
	--wp--custom--accent--soft-bg:     rgba(255, 118, 28, 0.1);
	--wp--custom--accent--soft-border: rgba(255, 118, 28, 0.2);
	--wp--custom--accent--border:      rgba(255, 118, 28, 0.3);
	--wp--custom--accent--glow-color:  rgba(255, 118, 28, 0.6);

	/* --- Gradient stops (--wp--custom--gradient--*) --- */
	--wp--custom--gradient--accent-from: #fa7c20;
	--wp--custom--gradient--accent-to:   #e84400;

	/* --- Container (--wp--custom--container--*) --- */
	--wp--custom--container--max: 1280px;
	--wp--custom--container--pad: 24px;

	/* --- Section spacing (--wp--custom--section--*) --- */
	--wp--custom--section--padding:        128px;
	--wp--custom--section--padding-tablet: 96px;
	--wp--custom--section--padding-mobile: 72px;

	/* --- Component sizes --- */
	--wp--custom--card-pad: 29px;
	--wp--custom--icon-box: 44px;

	/* --- Site header (--wp--custom--header--*) --- */
	--wp--custom--header--height: 64px;
	--wp--custom--header--bg:     rgba(16, 12, 10, 0.7);
	--wp--custom--header--blur:   12px;

	/* --- Letter-spacing (--wp--custom--tracking--*) --- */
	--wp--custom--tracking--hero:         -1.5px;
	--wp--custom--tracking--h2:           -1.2px;
	--wp--custom--tracking--h3:           -0.45px;
	--wp--custom--tracking--logo:         -0.9px;
	--wp--custom--tracking--eyebrow:      0.18em;
	--wp--custom--tracking--eyebrow-wide: 0.22em;
	--wp--custom--tracking--label:        0.05em;

	/* --- Line heights (--wp--custom--line-height--*) --- */
	--wp--custom--line-height--hero:  1.25;
	--wp--custom--line-height--h2:    1.2;
	--wp--custom--line-height--h3:    1.556;
	--wp--custom--line-height--lead:  1.625;
	--wp--custom--line-height--card:  1.625;
	--wp--custom--line-height--tight: 1.111;
}